Bootstrap 4.0中展开折叠导航栏如何实现覆盖内容而非推挤页面

嘿，我之前也碰到过一模一样的需求，折腾几次终于摸出了可行的方案，给你分享下：

核心思路是把移动端展开的折叠菜单改成绝对定位，让它脱离文档流，这样就不会把下方内容挤下去，同时要确保导航栏本身作为定位容器，菜单的层级足够高能覆盖内容。

具体操作步骤： #

1. 先确认你的导航栏基础结构是标准的Bootstrap 4结构（类似下面这样）：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

2. 添加自定义CSS，针对移动端的折叠菜单做调整：

/* 只在移动端生效（对应navbar-expand-lg的断点，991px及以下） */
@media (max-width: 991px) {
  /* 让导航栏成为绝对定位的父容器 */
  .navbar {
    position: relative;
    z-index: 1000; /* 确保导航栏本身层级足够高 */
  }

  /* 设置展开后的折叠菜单为绝对定位，实现覆盖效果 */
  .navbar-collapse.collapse.show {
    position: absolute;
    top: 100%; /* 让菜单紧贴导航栏底部，不重叠导航栏 */
    left: 0;
    right: 0;
    background-color: #f8f9fa; /* 和导航栏背景色保持一致，避免漏出下方内容 */
    z-index: 999;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 可选，加阴影让菜单更突出 */
  }
}

关键细节解释： #

• 给.navbar加position: relative：让子元素的绝对定位是相对于导航栏计算的，不会乱跑。
• top: 100%：保证菜单刚好在导航栏正下方，不会和导航栏本身重叠。
• 必须设置背景色：默认折叠菜单是透明的，不设置的话下方内容会透出来，和导航栏背景色统一就好。
• 媒体查询：只在移动端生效，避免影响桌面端的正常导航布局。

如果你的导航栏是固定在顶部的（用了fixed-top类），只需要把.navbar的position改成fixed就行，其他设置不变，依然能实现覆盖效果。

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