如何防止Bootstrap4折叠导航栏中的下拉列表撑开导航栏

你遇到的问题很典型，看这几张图就能明白：

• 大屏正常状态：
• 小屏折叠状态：
• 问题场景：点击下拉后折叠菜单被撑开：

我来帮你搞定这个问题！本质是折叠状态下的.navbar-collapse默认带了overflow: hidden属性，下拉菜单被限制在这个容器里，自然会把菜单撑高。另外你用两个重复的语言选择器来适配屏幕，确实有点繁琐，咱们可以合并优化一下，同时解决下拉的问题。

一、核心思路 #

1. 合并两个重复的语言选择器，减少冗余代码；
2. 通过自定义CSS调整下拉菜单的定位，让它脱离折叠容器的限制，避免撑开导航栏高度。

二、具体实现步骤 #

1. 重构HTML结构（合并语言选择器） #

把原来两个语言选择器合并成一个，放在导航栏的toggler按钮旁边，这样在小屏幕时它会显示在导航栏右侧，和大屏的位置逻辑一致：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!--navigation-->
<nav class="navbar sticky-top navbar-dark navbar-expand-lg">
  <a class="navbar-brand" href="#">Page Title</a>
  
  <!-- 合并后的语言选择器 -->
  <div class="language-selector ml-auto d-flex align-items-center">
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">&#127760; Language</a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="languageDropdown">
          <a class="dropdown-item" href="#">Language 1</a>
          <a class="dropdown-item" href="#">Language 2</a>
          <a class="dropdown-item" href="#">Language 3</a>
        </div>
      </li>
    </ul>
  </div>
  
  <button class="navbar-toggler ml-lg-0" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="navbar">
    <div class="navbar-nav">
      <!-- page user is looking at = "nav-link active"-->
      <a class="nav-item nav-link active" href="#">Home<span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Link 1</a>
      <a class="nav-item nav-link" href="#">Link 2</a>
      <div class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">The Team</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Link</a>
          <a class="dropdown-item" href="#">Another Link</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">An entirely different link</a>
        </div>
      </div>
      <a class="nav-item nav-link" href="sponsor_us.php">Link 3</a>
      <a class="nav-item nav-link disabled" href="#">inactive Link</a>
    </div>
  </div>
</nav>

2. 添加自定义CSS解决下拉撑开问题 #

添加以下样式，让小屏幕下的下拉菜单悬浮在导航栏外，不会撑开折叠菜单：

/* 适配lg断点以下的小屏幕 */
@media (max-width: 991.98px) {
  /* 给语言选择器容器设置相对定位，作为下拉菜单的定位基准 */
  .language-selector {
    position: relative;
  }
  
  /* 让下拉菜单绝对定位，脱离折叠容器的限制 */
  .language-selector .dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1050; /* 确保下拉菜单在最上层，不被其他元素遮挡 */
  }
  
  /* 取消折叠菜单的overflow:hidden，避免下拉被截断 */
  .navbar-collapse {
    overflow: visible !important;
  }
}

/* 大屏下保持原有布局逻辑 */
@media (min-width: 992px) {
  .language-selector {
    margin-left: auto;
  }
}

3. 效果验证 #

• 大屏状态（≥992px）：语言选择器正常显示在导航栏右侧，下拉菜单和原来的体验一致；
• 小屏状态（<992px）：语言选择器在导航栏的toggler按钮左侧，点击下拉时，菜单会悬浮在导航栏下方，完全不会撑开折叠的导航菜单高度，和大屏的体验统一。

三、额外提示 #

这样修改后，不仅解决了下拉撑开的问题，还减少了重复的HTML代码，后续维护语言选项只需要改一处就够了，更省心～

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