Bootstrap 5实现导航栏未折叠时悬浮、折叠时从顶部下压内容的问题

实现方案 #

核心思路 #

通过Bootstrap 5响应式定位类，让导航栏在不同断点下切换定位模式：

• 大屏（未折叠状态）：导航栏固定悬浮在顶部，覆盖主图顶部区域
• 小屏（折叠状态）：导航栏回归正常文档流，展开折叠菜单时自然下压下方所有页面内容

调整后的完整代码 #

HTML代码

<!-- 导航栏结构 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light bg-opacity-75 position-static position-lg-fixed w-100 top-0 start-0 z-3">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">站点标识</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="切换导航">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarToggleExternalContent">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">首页</a>
        </li>
        <!-- 可自行添加更多导航项 -->
      </ul>
    </div>
  </div>
</nav>

<!-- 主图区域 -->
<div id="bg-img" class="container-fluid px-0">
  <div id="main-wrap" class="container">
    <!-- 主图内容可自行填充 -->
  </div>
</div>

CSS代码

#bg-img {
  background-color: red;
  min-height: 75vh;
  width: 100%;
}

/* 可选自定义样式：小屏导航用纯色背景 */
@media (max-width: 991.98px) {
  .navbar {
    background-color: #fff !important;
  }
}

关键配置说明 #

• navbar-expand-lg：指定屏幕宽度≥992px时导航栏展开，<992px时折叠，可根据需求替换为navbar-expand-md/navbar-expand-sm调整折叠断点
• position-static position-lg-fixed：小屏导航占正常文档流，大屏导航固定悬浮在顶部
• w-100 top-0 start-0 z-3：保证大屏固定导航宽度撑满、层级高于其他内容，不会被主图覆盖
• 请确保已正确引入Bootstrap 5的CSS和JS依赖，否则折叠交互不会生效

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