Bootstrap 4：如何实现固定响应式导航栏与侧边栏且保留原设计？

我看了你的代码和需求，这就给你调整成符合要求的版本——滚动时导航栏和侧边栏固定不动，同时保留响应式特性和原有设计，完全用Bootstrap原生类和少量必要的CSS调整来搞定：

核心调整点 #

• 导航栏：添加fixed-top类，同时给页面内容容器加padding避免被导航栏遮挡
• 侧边栏：通过定位设置让它固定在左侧，不随滚动移动
• 整体布局：确保flex容器高度覆盖视口，避免滚动时布局错乱

修改后的完整代码 #

<style>
/* 仅需少量自定义CSS处理布局偏移 */
#wrapper {
  min-height: 100vh;
}

#sidebar-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 1000;
  width: 250px;
}

/* 给页面内容加padding，避免被固定导航栏遮挡 */
#page-content-wrapper {
  padding-top: 56px; /* 对应Bootstrap默认navbar高度 */
  margin-left: 250px; /* 匹配侧边栏宽度 */
}

/* 响应式适配：小屏幕下隐藏侧边栏偏移 */
@media (max-width: 768px) {
  #page-content-wrapper {
    margin-left: 0;
  }
}
</style>

<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>

  <!-- 页面内容区 -->
  <div id="page-content-wrapper">
    <!-- 导航栏：添加fixed-top类实现固定 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-success border-bottom fixed-top">
      <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>

    <!-- 页面主体内容示例 -->
    <div class="container-fluid">
      <h1 class="mt-4">Dashboard</h1>
      <p>滚动页面看看导航栏和侧边栏是不是固定住啦！</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>

关键说明 #

1. 导航栏部分：给<nav>添加fixed-top是Bootstrap原生的固定顶部方案，我们只需要给#page-content-wrapper加padding-top:56px，避免页面内容被导航栏挡住（56px是Bootstrap默认navbar在大屏下的高度）。
2. 侧边栏部分：通过position:fixed让侧边栏固定在视口左侧，设置height:100vh占满整个视口高度，z-index:1000确保它在内容上方；同时给#page-content-wrapper设置margin-left:250px，让内容不被侧边栏遮挡。
3. 响应式适配：在小屏幕下移除页面内容的左边距，配合你原有的menu-toggle按钮，实现侧边栏的显示/隐藏切换，保持移动端的良好体验。

这样调整后，既保留了你原有的设计风格，又完美实现了滚动时导航栏和侧边栏固定的需求，完全基于Bootstrap特性，不会出现之前的布局问题～

内容的提问来源于stack exchange，提问作者Bayanihan 4