在引导程序中制作固定的导航栏和侧边栏答案

【问题标题】：Make a fixed navbar and sidebar in bootstrap在引导程序中制作固定的导航栏和侧边栏
【发布时间】：2019-08-12 17:17:01
【问题描述】：

我只想修复navbar 和sidebar，即使用户向下滚动页面。而且反应灵敏。如何在不更改导航栏和侧边栏设计的情况下做到这一点？有人可以使用引导程序帮助我解决我的问题吗？这是我的小提琴https://jsfiddle.net/exyvat08/17/

<div class="d-flex" id="wrapper">
 <div class="bg-light border-right" id="sidebar-wrapper">
  <div class="sidebar-heading"><a href="#" class="navbar-left text-dark"><img class="mx-auto d-block" src="../images/logo.jpg" id="logo"></a></div>

 <div class="list-group list-group-flush">
  <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Dashboard</a>

  <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">User</a>

  <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Supplier</a>

  <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Purchase Order</a>

  <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Reports</a>

</div>

原创设计

【问题讨论】：

标签： html css responsive-design bootstrap-4

【解决方案1】：

将您的 CSS 更改为如下所示：

.navbar{
    position: fixed;
    left: 0px; /* the key here is to make left and right '0px' */
    right: 0px;
    background: linear-gradient(to top right,#0084ff,#0084ff);
}
.content-container{ /* change this to be the container of your content */
    margin-top: 57px /* 57px is just the height of your navbar */
}

小提琴：https://jsfiddle.net/exyvat08/17/

【讨论】：

现在的问题是主要内容上去了。我还将位置固定到我的侧边栏
@Bayanihan4 你应该给内容一个菜单高度的margin-top
@Bayanihan4 你从来没有在小提琴中包含内容，所以我不能给你css来修复它。但是，正如 MrLine 所说，您需要在内容父容器的顶部添加边距。

【解决方案2】：

我已使用 position fixed 和 width calc 修复了侧边栏和导航栏

 $("#menu-toggle").click(function(e) {
   e.preventDefault();
   $("#wrapper").toggleClass("toggled");
   if (e.target.innerText == "Show Menu") {
     e.target.innerText = "Hide Menu";
   } else {
     e.target.innerText = "Show Menu";
   }
 });

body {
  height: 100%;
  overflow-x: hidden;
  font-family: sans-serif;

}

#logo {
  width: 160px;
  height: 150px;
  border-radius: 50%;
}

#page-content-wrapper {
    margin-left: 241px;
        width: calc(100% - 241px);
}

#sidebar-wrapper {
  min-height: 100vh;
  margin-left: -15rem;
  -webkit-transition: margin .25s ease-out;
  -moz-transition: margin .25s ease-out;
  -o-transition: margin .25s ease-out;
  transition: margin .25s ease-out;
  position:fixed;
  z-index: 1;
  height:100vh;
}

#sidebar-wrapper .sidebar-heading {
  padding: 0.875rem 1.25rem;
  font-size: 1.2rem;
}

#sidebar-wrapper .list-group {
  width: 15rem;
}

#page-content-wrapper {
  min-width: 100vw;
}

#wrapper.toggled #sidebar-wrapper {
  margin-left: 0;
}

.navbar {
  background: linear-gradient(to top right, #0084ff, #0084ff);
  position: fixed !important;
       width: calc(100% - 241px);
   top:0px;
  
}

@media (min-width: 768px) {
  #sidebar-wrapper {
    margin-left: 0;
  }

  #page-content-wrapper {
    min-width: 0;
    width: 100%;
  }

  #wrapper.toggled #sidebar-wrapper {
    margin-left: -15rem;
  }
}

<!DOCTYPE html>
<html>

  <head>
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>

  <body>

    <body>
      <div class="d-flex" id="wrapper">
        <div class="bg-light border-right" id="sidebar-wrapper">
          <div class="sidebar-heading"><a href="#" class="navbar-left text-dark"><img class="mx-auto d-block" src="../images/logo.jpg" id="logo"></a></div>
          <div class="list-group list-group-flush">
            <a href="<?php echo url_for('admin/index.php')?>" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold"><i class="fas fa-tachometer-alt"></i>Dashboard</a>

            <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">User</a>

            <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Supplier</a>

            <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Purchase Order</a>

            <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Reports</a>

          </div>
        </div>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">

          <nav class="navbar navbar-expand-lg navbar-light bg-success border-bottom">
            <button class="btn btn-outline-light btn-sm" id="menu-toggle">Hide Menu</button>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
                <li class="nav-item active">
                  <a class="nav-link text-light" href=""><i class="fas fa-home"></i> Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-light"><i class="fas fa-building"></i> Contact</a>
                </li>
                <li class="nav-item dropdown">
                  <a class="btn nav-link dropdown-toggle text-light" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user"></i> John Doe
                  </a>
                  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">See Profile</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Logout</a>
                  </div>
                </li>
              </ul>
            </div>
          </nav>
          <h1>
          test
          </h1>
          <h1>
          test
          </h1>
          <h1>
          test
          </h1>
          <h1>
          test
          </h1>
          <h1>
          test
          </h1>
          <h1>
          test
          </h1>
          <h1>
          test
          </h1>
          <h1>
          test
          </h1>
          <h1>
          test
          </h1>
          <h1>
          test
          </h1>
          <h1>
          test
          </h1>
          <h1>
          test
          </h1>
          <h1>
          test
          </h1>
          <h1>
          test
          </h1>
    </body>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

【讨论】：

我通过添加引导类和 CSS 修复了导航栏和侧边栏。我的导航栏使用sticky-top，侧边栏使用position-fixed，最重要的是主要内容的margin-left与侧导航的width相同
非常有帮助，如果您需要任何其他帮助，请告诉我。