列表项内元素垂直水平对齐布局调试求助

我来帮你搞定这个布局问题！核心是利用Bootstrap的弹性布局类重新组织元素结构，让标题、描述和下拉框按需求排列且垂直对齐。

修改后的完整代码 #

<div class="container py-5">
  <div class="row no-gutters">
    <div class="col-12 col-lg-8">
      <div class="card">
        <div class="card-header">
          <h5 class="text-heading-blue mb-0 font-weight-semi-bold">Title</h5>
        </div>
        <div class="card-body">
          <ul class="list-group">
            <li class="list-group-item d-flex align-items-center justify-content-between">
              <!-- 左侧文本区域：标题+描述 -->
              <div class="text-container">
                <span class="d-block font-weight-medium">Item 0</span>
                <small class="d-block text-muted">Description Item 0</small>
              </div>
              <!-- 右侧下拉框区域 -->
              <div class="select-container d-flex gap-2">
                <form class="mb-0">
                  <select class="custom-select form-control form-control-sm">
                    <option selected="">0</option>
                    <option>1</option>
                    <option>2</option>
                  </select>
                </form>
                <form class="mb-0">
                  <select class="custom-select form-control form-control-sm">
                    <option selected="">0</option>
                    <option>1</option>
                    <option>2</option>
                  </select>
                </form>
              </div>
            </li>
            <li class="list-group-item d-flex align-items-center justify-content-between">
              <div class="text-container">
                <span class="d-block font-weight-medium">Item 1</span>
                <small class="d-block text-muted">Description Item 1</small>
              </div>
              <div class="select-container d-flex gap-2">
                <form class="mb-0">
                  <select class="custom-select form-control form-control-sm">
                    <option selected="">0</option>
                    <option>1</option>
                    <option>2</option>
                  </select>
                </form>
                <form class="mb-0">
                  <select class="custom-select form-control form-control-sm">
                    <option selected="">0</option>
                    <option>1</option>
                    <option>2</option>
                  </select>
                </form>
              </div>
            </li>
            <li class="list-group-item d-flex align-items-center justify-content-between">
              <div class="text-container">
                <span class="d-block font-weight-medium">Item 2</span>
                <small class="d-block text-muted">Description Item 2</small>
              </div>
              <div class="select-container d-flex gap-2">
                <form class="mb-0">
                  <select class="custom-select form-control form-control-sm">
                    <option selected="">0</option>
                    <option>1</option>
                    <option>2</option>
                  </select>
                </form>
                <form class="mb-0">
                  <select class="custom-select form-control form-control-sm">
                    <option selected="">0</option>
                    <option>1</option>
                    <option>2</option>
                  </select>
                </form>
              </div>
            </li>
          </ul>
        </div>
        <div class="card-footer">
          <button type="button" class="float-right btn">Next</button>
        </div>
      </div>
    </div>
  </div>
</div>

关键调整点说明 #

1. 弹性容器设置：给每个.list-group-item添加d-flex align-items-center justify-content-between：

   • d-flex把列表项变成弹性布局，让子元素可以横向排列
   • align-items-center确保所有元素垂直居中对齐
   • justify-content-between让左侧文本和右侧下拉框分别靠两端排列，留出合理间距

2. 左侧文本区域：用一个div.text-container包裹标题和描述，给标题加d-block让它独占一行，描述用small.d-block也独占一行，这样描述就自然出现在标题下方；text-muted让描述文本颜色更柔和，符合常规UI规范。

3. 右侧下拉框区域：用div.select-container.d-flex gap-2把两个下拉框包裹起来：

   • d-flex让两个下拉框横向排列
   • gap-2给它们之间添加均匀间距（替代margin，更简洁易维护）
   • 给form添加mb-0去掉默认的底部外边距，避免多余空白
   • 给select加form-control-sm让下拉框尺寸更紧凑，和文本区域视觉更协调

这样调整后，就能完美实现你想要的布局：标题在上、描述在下，右侧两个下拉框并排，所有元素垂直对齐。

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