Bootstrap 4.0 Beta两行固定顶部导航栏实现及折叠处理求助

嘿，我完全懂你现在的困惑！Bootstrap 4 Beta的固定定位和折叠组件刚开始上手确实容易踩坑，我来一步步帮你捋清楚：

一、实现双栏固定在顶部（滚动时保持固定） #

Bootstrap的fixed-top类会让元素脱离文档流固定在页面顶部，但直接给两个栏都加这个类会导致重叠。我们只需要给第二个栏（导航栏）设置顶部偏移，让它刚好卡在顶部栏下方即可：

步骤1：HTML结构 #

<!-- 顶部栏 -->
<div class="top-bar fixed-top bg-dark text-white py-2">
  <div class="container">
    <span>这是我的顶部栏内容</span>
  </div>
</div>

<!-- 固定导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top navbar-below-topbar">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
    <!-- 折叠触发按钮 -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- 折叠菜单内容 -->
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
      <form class="form-inline mt-2 mt-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

<!-- 页面内容 -->
<div class="container mt-5 pt-3">
  <!-- 这里可以放大量测试文本，用来验证滚动固定效果 -->
  <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...</p>
</div>

步骤2：CSS调整（关键！） #

顶部栏有固定高度（默认py-2加上内容高度大概56px，你可以根据自己的内容调整），我们需要给导航栏设置顶部偏移，同时给body加padding避免内容被固定栏遮挡：

/* 让导航栏固定在顶部栏下方 */
.navbar-below-topbar {
  top: 56px; /* 这个值要和顶部栏的实际高度一致 */
}

/* 给页面内容预留顶部空间，避免被固定栏覆盖 */
body {
  padding-top: 112px; /* 顶部栏高度 + 导航栏高度，比如56+56=112px */
}

二、折叠功能的正确用法 #

必须用Bootstrap自带的显示/隐藏功能，也就是collapse组件，不用自己写JS逻辑，只需要做好属性绑定：

• 折叠按钮：添加data-toggle="collapse"和data-target="#你的折叠内容ID"
• 折叠内容容器：添加collapse navbar-collapse类，并设置唯一ID对应按钮的data-target
• 这样点击按钮就会自动触发展开/折叠，完全符合Bootstrap的设计规范，稳定性拉满

额外小提示 #

• 如果你不确定顶部栏的精确高度，可以用浏览器开发者工具查看元素的实际高度，再调整CSS里的top和padding-top值
• Bootstrap 4 Beta里的navbar-expand-lg类控制了导航栏的响应式逻辑：大屏幕下自动展开，小屏幕下折叠，你可以根据需求换成navbar-expand-md或navbar-expand-sm

内容的提问来源于stack exchange，提问作者kold-kreator