Bootstrap横向双下拉按钮布局异常求助

我来帮你搞定这个横向排列下拉按钮的问题！你的现有代码主要因为结构不规范和错误的定位样式导致布局混乱，下面是调整后的完整解决方案：

首先先梳理下你现有代码的核心问题：

• 两个下拉组件被塞进了同一个.btn-group，不符合Bootstrap组件的结构规范
• 滥用position: absolute导致元素重叠、布局失控
• 自定义样式和Bootstrap默认样式冲突

下面是调整后的完整代码，完美实现你想要的横向排列效果：

调整后的HTML代码 #

<div class="container mt-4">
  <div class="row">
    <!-- 用Bootstrap的d-flex实现横向排列，gap控制组件间距 -->
    <div class="d-flex gap-5">
      <!-- 第一个下拉组件 -->
      <div class="dropdown">
        <label class="label-status d-block mb-2">Test1</label>
        <div class="input-group">
          <button class="dropdown-select form-control border-0 border-bottom border-primary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            demo
          </button>
          <button class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="sr-only">Toggle Dropdown</span>
          </button>
          <ul class="dropdown-menu">
            <li><button class="dropdown-item" type="button">Action</button></li>
            <li><button class="dropdown-item" type="button">Another action</button></li>
          </ul>
        </div>
      </div>

      <!-- 第二个下拉组件 -->
      <div class="dropdown">
        <label class="label-serv d-block mb-2">Test2</label>
        <div class="input-group">
          <button class="dropdown-select form-control border-0 border-bottom border-primary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            demo
          </button>
          <button class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="sr-only">Toggle Dropdown</span>
          </button>
          <ul class="dropdown-menu">
            <li><button class="dropdown-item" type="button">Action</button></li>
            <li><button class="dropdown-item" type="button">Another action</button></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

配套CSS代码 #

/* 自定义标签样式 */
label {
  font-size: 0.875rem;
  color: #666666;
  text-transform: uppercase;
  line-height: 1;
}

/* 下拉选择框样式优化 */
.dropdown-select {
  background-color: white;
  padding-right: 0; /* 让分割按钮紧贴选择框 */
}

/* 调整分割按钮样式，去掉多余边框 */
.btn-outline-primary.dropdown-toggle-split {
  border-left: none;
  color: #0d6efd; /* 和底部边框颜色统一 */
}

关键调整说明 #

• 把每个下拉组件放在独立的.dropdown容器中，用Bootstrap自带的d-flex类实现横向排列，gap-5控制两个组件的间距
• 使用input-group组合选择按钮和分割按钮，保证组件结构符合Bootstrap规范
• 移除了导致布局混乱的position: absolute，改用Bootstrap自带的间距类（比如mb-2）控制元素间距
• 自定义样式尽量和Bootstrap默认类结合，避免冲突，比如用border-primary代替自定义的deepskyblue，保持风格统一
• 如果使用Bootstrap 5，记得把旧版的data-toggle改成data-bs-toggle，这是Bootstrap 5的属性规范

这样调整后，就能实现你想要的横向排列、带标签的下拉按钮效果啦！

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