Bootstrap下拉菜单点击后偏移至右侧的问题求助

嘿，我一眼就发现问题所在啦！你那个点击后偏移到右侧的“Programmes”下拉菜单，是因为多嵌套了一层不必要的.btn-group。

先看你这段有问题的代码部分：

<button type="button" class="btn btn-primary dropdown-toggle btn-xs" data-toggle="dropdown">
  Programmes
</button>
<div class="btn-group"> <!-- 这里就是多余的嵌套 -->
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Private</a>
    <!-- 其他下拉项 -->
  </div>
</div>

Bootstrap的下拉组件要求.dropdown-menu必须直接放在触发按钮的父容器（也就是外层的.btn-group）里，和触发按钮同级。你额外套的这层.btn-group会干扰Bootstrap的定位计算逻辑，导致下拉菜单偏移到错误的位置。

修改后的完整代码应该是这样的：

<div class="col-12">
  <div class="text-center">
    <div class="btn-group">
      <button type="button" class="btn btn-dark btn-xs">About Us</button>
      <button type="button" class="btn btn-primary dropdown-toggle btn-xs" data-toggle="dropdown">
        Programmes
      </button>
      <!-- 去掉多余的.btn-group，直接放dropdown-menu -->
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Private</a>
        <a class="dropdown-item" href="#">Veteran</a>
        <a class="dropdown-item" href="#">Young Adult</a>
        <a class="dropdown-item" href="#">Sponsor</a>
        <a class="dropdown-item" href="#">Volunteer</a>
        <a class="dropdown-item" href="#">Fundraise</a>
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle btn-xs" data-toggle="dropdown">
          Media
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Pictures</a>
          <a class="dropdown-item" href="#">Blog</a>
          <a class="dropdown-item" href="#">Newsletter</a>
        </div>
      </div>
      <button type="button" class="btn btn-dark btn-xs">Donate</button>
    </div>
  </div>
</div>

你可以对比一下“Media”下拉菜单的结构，它就是正确的嵌套方式——触发按钮和.dropdown-menu直接放在同一个.btn-group里，所以能正常显示。

因为你没有修改Bootstrap的默认CSS，所以只要调整这个嵌套结构，下拉菜单的定位就会恢复正常啦！

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