Question

我尝试使用bootstrap创建一个带有固定顶部导航栏和折叠侧边栏的仪表板。我想自己创建它，而不是使用我们可以在互联网上找到的现有产品。这是我的尝试： https://jsfiddle.net/89jozov9/

HTML：

<!-- Top NAVBAR -->
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
  <div class="navbar-nav">
    <button class="navbar-toggler nav-item nav-link" type="button" data-toggle="collapse" data-target="#sidebar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="nav-item nav-link" href="#">myPortal</a>
  </div>
</nav>
<!-- \\ Top NAVBAR -->

<!-- Main Container-->
<div class="container-fluid main-container">
  <div class="row">

    <!-- SIDEBAR -->
    <div class="col-md-2 collapse width show" id="sidebar">
      <nav class="nav flex-column nav-pills nav-justified">
        <a class="nav-item nav-link active" href="#">Active</a>
        <a class="nav-item nav-link" href="#">Link</a>
        <a class="nav-item nav-link" href="#">Link</a>
        <a class="nav-item nav-link disabled" href="#">Disabled</a>
      </nav>
    </div>
    <!-- \\ SIDEBAR -->

    <!-- Main Container-->
    <div class="col-md-10">
      <h1> Hello</h1>
    </div>
    <!-- \\ Main Container-->

   </div>
</div>
<!-- \\ Main Container-->

CSS：

.main-container {
  margin-top: 60px;
}
.navbar-expand-lg .navbar-toggler {
  display: unset;
  font-size: 1rem;
}
.navbar-expand-lg .navbar-nav .nav-link  {
  padding: 0.25rem;
}

我发现主要有2个问题（在大屏幕上）：

崩溃并非真正流畅
药片全部显示，我不知道为什么

解决这些问题的任何建议？

谢谢！史蒂夫

Bootstrap 4 Fluid折叠侧边栏

0 个答案: