CSS 定位和列表项的问题

Question

我正在尝试使用 Angular 和 Bootstrap 创建导航侧边栏，但我的导航项未按应有的方式显示。

APP 组件 HTML

<div class="container-fluid">

  <div class="row" id="header">
    <div class="col-md-12">
      <app-admin-header></app-admin-header>
    </div>
  </div>

  <div class="row">
    <div class="col-md-2" id="sidebar-parent">
      <app-sidebar-menu></app-sidebar-menu>
    </div>
    <div class="jumbotron col-md-10" id="content-parent">
        <router-outlet></router-outlet>
    </div>
  </div>

</div>

APP 组件 CSS

#sidebar-parent {
  position:relative;
  top:0;
  left:0;
}
#content-parent {
  position:relative;
  top:0;
  left:0px;
}

标题 HTML

<div id="header-wrapper">

    <nav class="navbar navbar-expand-lg navbar-light bg-light">

        <!--button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button-->
        <div class="col-md-12">
          <ul class="navbar-nav ml-auto">
            <li class="sidebar-brand">
              <a href="#">
              </a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="#">Home
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="#">Coupons</a>
            </li>
          </ul>
        </div>
    </nav>

</div>

标题 CSS

#header-wrapper {
  background: #35acdf;
  margin-bottom: 7px;
}

.navbar {
  background: #35acdf;
}

边栏 HTML

<div id="page-wrapper">
  <div id="page-viewport">
    <div id="sidebar">
      <div id="sidebar-header">
        <a href="#" class="toggle-sidebar">Sidebar
          <span class="pull-right">
            <a href="#" class="toggle-sidebar btn btn-default">
              <span class="fa fa-bars"></span>
            </a>
          </span>
        </a>
      </div>

        <ul class="nav nav-pills nav-stacked">
          <li><a href="#" routerLink="dashboard"><span class="fa fa-shopping-bag"></span>&emsp;Dashboard</a></li>
          <li><a href="#" routerLink="categories"><span class="fa fa-list"></span>&emsp;Categories</a></li>
          <li><a href="#"><span class="fa fa-lock"></span>&emsp;Companies</a></li>
           <li><a href="#"><span class="fa fa-industry"></span>&emsp;Coupons</a></li>
           <li><a href="#" routerLink="product"><span class="fa fa-male"></span>&emsp;Products</a></li>
          <li><a href="#"><span class="fa fa-list"></span>&emsp;Sales</a></li>
          <li><a href="#"><span class="fa fa-lock"></span>&emsp;Deals</a></li>
        </ul>

 </div>
  </div>

</div>

边栏 CSS

#page-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  left: 0;
}

#page-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#sidebar {
  position: relative;
  width: 100%;
  height: 100%;
  left: 0px;
  border-right: 1px solid #f0f0f0;
  background-color: #f9f9f9;
  padding-left: 15px;
  list-style: none;
}

#sidebar h3 {
  display:inline;
  position:relative;
  top:5px;
  left:5px;
}

#sidebar a:hover {
  text-decoration:none;
}

#sidebar-header {
  height: 40px;
  border-bottom:1px solid #f0f0f0;
}

.sidebar li {
  position: absolute;
  line-height: 20px;

  width: 100%;
  padding: 10px 0 10px 20px;
}

#page-wrapper.show-sidebar #page-viewport {
  -webkit-transform: translateX(200px);
}

#page-wrapper.show-sidebar #sidebar-page-content {
  width: -webkit-calc(100% - 250px);
}

从下图中可以看出，“Products”和“Deals”列表项跟在它们之前的项之后，而不是单独占据一行。

我希望每个项目占据单独的行。

Answer 1

默认的.nav 引导类是display: flex; flex: wrap;。 只需将flex-column 类添加到您的导航中，就可以了。 文档：https://getbootstrap.com/docs/4.0/components/navs/#vertical