Bootstrap 4移动端点击导航切换器致内容下移问题求助

我完全懂你的困扰——在xs/sm小屏幕下点击导航切换器后，连带着头部在内的整个页面内容都被下拉菜单挤得向下移动，这和Bootstrap 3、4 alpha 5的体验完全不一样。其实这个变化是从Bootstrap 4 alpha 6开始的，官方把导航下拉菜单的默认定位从绝对定位改成了静态定位，让菜单在文档流里自然展开，但确实打破了之前的使用习惯。

下面是针对性的修复方案，只会在小屏幕视口生效，不会影响大屏的导航表现：

步骤1：添加自定义CSS样式 #

在你的项目样式表中加入这段代码：

@media (max-width: 767.98px) {
  /* 给导航栏设置相对定位，作为下拉菜单的参照容器 */
  .navbar {
    position: relative;
  }
  /* 把下拉菜单改成绝对定位，脱离文档流就不会推挤页面内容 */
  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff; /* 替换成你导航栏的背景色，避免透明导致内容重叠 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 可选，加阴影提升菜单层次感 */
    z-index: 1000; /* 确保菜单显示在其他页面内容上方 */
  }
}

步骤2：确认导航栏结构合规 #

确保你的导航栏符合Bootstrap的标准结构，避免因嵌套错误导致样式失效：

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" href="#">站点品牌</a>
  <button class="navbar-toggler d-md-none" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarMenu">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页 <span class="sr-only">(当前)</span></a>
      </li>
      <!-- 更多导航链接项 -->
    </ul>
  </div>
</nav>

方案原理说明 #

• 给.navbar设置position: relative，让绝对定位的下拉菜单以导航栏为参照点，不会跑到页面其他位置。
• 将.navbar-collapse改为position: absolute后，它会脱离正常文档流，不再占用页面空间，自然也就不会推挤下方的内容。
• 通过媒体查询限定在max-width:767.98px生效，完美适配Bootstrap的sm断点，大屏下的导航展开行为不受任何影响。

如果你的导航栏有自定义高度或特殊背景色，记得调整CSS里的background-color值，保证下拉菜单和导航栏视觉统一，同时避免和下方页面内容重叠后出现视觉混乱。

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