如何将Bootstrap下拉菜单对齐到选中导航项正下方

我尝试让「Big Dropdown」菜单显示在对应导航项的正下方，已经给菜单设置了max-width，但始终没法正确对齐。希望得到一个全响应式的简洁方案，不用逐一调整细节。

绿色框是下拉菜单的理想自然定位位置，当前下拉菜单处于错误位置；理想状态下，新增导航项时，每个下拉菜单都能分别对应显示在其导航项下方。

现有代码 #

HTML

<li class="nav-item dropdown position-static"> 
  <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button">Big Dropdown</a> 
  <ul class="dropdown-menu megamenu midmenu "> 
    <div class="row"> 
      <li class="col-md-6"> 
        <ul> 
          <h6 class="list-header">List Header</h6> 
          <hr> 
          <li> <a href="#">Lorem Ipsum</a> </li> 
          <li> <a href="#">Lorem Ipsum</a> </li> 
          <li> <a href="#">Lorem Ipsum</a> </li> 
          <li> <a href="#">Lorem Ipsum</a> </li> 
          <li> <a href="#">Lorem Ipsum</a> </li> 
        </ul> 
      </li> 
      <li class="col-md-6"> 
        <ul> 
          <h6 class="list-header">List Header</h6> 
          <hr> 
          <li> <a href="#">Lorem Ipsum</a> </li> 
          <li> <a href="#">Lorem Ipsum</a> </li> 
          <li> <a href="#">Lorem Ipsum</a> </li> 
          <li> <a href="#">Lorem Ipsum</a> </li> 
          <li> <a href="#">Lorem Ipsum</a> </li> 
        </ul> 
      </li> 
    </div> 
  </ul> 
</li>

CSS

nav.main .megamenu { 
  padding: 20px 20px; 
  position: absolute; 
  top: auto; 
  left: 0; 
  right: 0; 
  max-width: 1500px; 
  width: 100%; 
  margin-left: auto; 
  margin-right: auto; 
} 
nav.main .midmenu { 
  position: absolute; 
  padding: 20px 20px; 
  float: left; 
  top: auto; 
  left: auto; 
  right: auto; 
  max-width: 650px; 
  width: 100%; 
  margin-left: auto; 
  margin-right: auto; 
}

解决方案：简洁全响应式对齐方案 #

我帮你找到了问题的核心：你给父级li.nav-item加了position-static，这直接破坏了下拉菜单的定位参照，导致它没法对齐到导航项下方。咱们只需要做两处关键调整，就能搞定全响应式的对齐效果：

1. 移除父级的position-static
   把HTML里的<li class="nav-item dropdown position-static">改成<li class="nav-item dropdown">，让父级保持默认的position: relative——这是下拉菜单能以它为基准定位的前提。

2. 修改.midmenu的CSS定位规则
   替换掉原来的.midmenu样式，用left: 50%加transform: translateX(-50%)的组合来实现完美居中，同时保留响应式特性：

nav.main .midmenu {
  position: absolute;
  padding: 20px 20px;
  top: 100%; /* 让菜单紧贴导航项的底部 */
  left: 50%; /* 先把菜单的左边缘对齐父级的中心 */
  transform: translateX(-50%); /* 向左偏移自身宽度的一半，实现水平居中 */
  max-width: 650px;
  width: 100%;
  margin: 0; /* 去掉自动边距，避免干扰居中逻辑 */
}

3. 可选：移动端适配
   如果需要在小屏幕上让菜单占满宽度，加个媒体查询就行：

@media (max-width: 767px) {
  nav.main .midmenu {
    left: 0;
    transform: none;
    max-width: 100%;
  }
}

这样调整后，不管你新增多少导航项，每个下拉菜单都会自动对齐到对应导航项的正下方，而且完全适配各种屏幕尺寸，不用再逐个调整细节啦！

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