Bootstrap分段下拉按钮居中后分离问题求助

你的问题出在几个布局细节上，导致分段按钮分离：

• 拆分按钮被设置为d-block块级元素，脱离了和主按钮的行内布局
• 多余的input-group嵌套干扰了默认的按钮组合逻辑
• 全局的m-3外边距让两个按钮之间产生了不必要的间距

按以下方式修改代码就能解决：

1. 移除拆分按钮上的mx-auto d-block类，让它和主按钮保持同一行
2. 给包裹两个按钮的容器添加d-flex justify-content-center实现整体居中
3. 简化多余的嵌套结构，去掉不必要的input-group flex-nowrap
4. 调整按钮外边距，用me-0消除主按钮和拆分按钮之间的间隙，给容器加mt-3控制和图片的距离

修正后的代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<div class="container mt-3">
  <div class="row justify-content-center">
    <form>
      <div class="mb-3 text-center">
        <img src="https://yt3.ggpht.com/7tCfeCWH4arhsTM-4Rz4IxWieQbegzibeXlG-kbytAujdk5dr2K0gBb8NG0Cvk6lB1dPkjyd=s900-c-k-c0x00ffffff-no-rj" width="250px" height="250px" alt="Bad Bunny" class="mx-auto d-block">
        <!-- 用d-flex justify-content-center让按钮组居中 -->
        <div class="d-flex justify-content-center mt-3">
          <button class="btn btn-dark me-0">Bad Bunny Albums</button>
          <button 
            class="btn btn-dark dropdown-toggle dropdown-toggle-split" 
            type="button" 
            data-bs-toggle="dropdown">
            <span class="visually-hidden">Dropdown</span>
          </button>
          <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">X 100pre</a></li>
              <li><a class="dropdown-item" href="#">Oasis</a></li>
              <li><a class="dropdown-item" href="#">YHLQMDLG</a></li>
              <li><a class="dropdown-item" href="#">Las que no iban a salir</a></li>
              <li><a class="dropdown-item" href="#">El Ultimo Tour Del Mundo</a></li>
              <li><a class="dropdown-item" href="#">Un Verano Sin Ti</a></li>
          </ul>
        </div>
      </div>
    </form>
  </div>
</div>

这样修改后，分段下拉按钮会紧贴在一起，并且整体在图片下方居中显示，符合你想要的效果。

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