Bootstrap导航栏中等尺寸无法向下展开问题及解决方法

这问题我之前也碰到过，核心是Bootstrap导航栏的折叠断点和栅格布局的断点不匹配，导致中等屏幕下布局冲突，菜单被“藏”起来了。

问题原因拆解 #

你的导航栏用了navbar-expand-lg，这意味着：

• 屏幕宽度≥992px（lg断点）：导航栏正常展开，显示完整菜单
• 屏幕宽度<992px：导航栏自动折叠，显示汉堡按钮

但你给品牌容器和菜单容器加了col-md-4，md断点是≥768px，这就导致在768px ≤ 屏幕宽度 < 992px的中等屏幕区间里：

1. 导航栏已经触发折叠（因为<lg断点）
2. 栅格的col-md-4同时生效，把折叠后的菜单容器限制在1/3宽度内
3. 加上Bootstrap栅格的默认布局规则，菜单内容被挤压到了视觉不可见的区域，看起来就像点击汉堡按钮后菜单没展开

解决方案 #

把所有的col-md-4替换成col-lg-4，让栅格布局的断点和导航栏的折叠断点保持一致：

• 屏幕宽度≥992px：col-lg-4生效，导航栏内容按1/3宽度排列，正常展开
• 屏幕宽度<992px：col-lg-4不生效，折叠菜单不受栅格列宽度限制，点击汉堡按钮后能正常向下展开

代码对比 #

原问题代码

<nav class="navbar navbar-expand-lg navbar-light bg-white"> 
  <div class="brand-column col-md-4"> 
    <div class="navbar-brand"> 
      <span>Plug</span> 
    </div> 
  </div> 
  <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarContent"> 
    <span class="navbar-toggler-icon"></span> 
  </button> 
  <div class="collapse navbar-collapse col-md-4" id="navbarContent"> 
    <ul class="navbar-nav mx-auto d-flex align-items-center text-nowrap text-center"> 
      <li class="nav-item active mx-1"> 
        <a class="nav-link text-header">Home</a> 
      </li> 
      <li class="nav-item mx-1"> 
        <a class="nav-link text-header">Solutions</a> 
      </li> 
      <li class="nav-item mx-1"> 
        <a class="nav-link text-header">About Us</a> 
      </li> 
      <li class="nav-item mx-1"> 
        <a class="btn btn-success btn-sm px-3 rounded-pill"> Login </a> 
      </li> 
    </ul> 
  </div> 
</nav>

修复后代码

<nav class="navbar navbar-expand-lg navbar-light bg-white"> 
  <div class="brand-column col-lg-4"> 
    <div class="navbar-brand"> 
      <span>Plug</span> 
    </div> 
  </div> 
  <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarContent"> 
    <span class="navbar-toggler-icon"></span> 
  </button> 
  <div class="collapse navbar-collapse col-lg-4" id="navbarContent"> 
    <ul class="navbar-nav mx-auto d-flex align-items-center text-nowrap text-center"> 
      <li class="nav-item active mx-1"> 
        <a class="nav-link text-header">Home</a> 
      </li> 
      <li class="nav-item mx-1"> 
        <a class="nav-link text-header">Solutions</a> 
      </li> 
      <li class="nav-item mx-1"> 
        <a class="nav-link text-header">About Us</a> 
      </li> 
      <li class="nav-item mx-1"> 
        <a class="btn btn-success btn-sm px-3 rounded-pill"> Login </a> 
      </li> 
    </ul> 
  </div> 
</nav>

总结 #

简单说就是要让导航栏的折叠触发断点和栅格布局断点保持统一，避免在中间尺寸屏幕上出现布局冲突。这次的坑就是误以为col-md-4只控制多行折叠的断点，实际上它会在md及以上屏幕生效，和导航栏的lg折叠规则撞车了。

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