Bootstrap响应式布局问题：标题与对应内容行对齐需求

原布局的问题在于把标题和内容拆成了独立的列，当内容换行后，标题无法自动匹配对应内容的位置。要解决这个问题，核心是让每一组「标题-内容」成为一个独立的对齐单元，再把这些单元组合成响应式布局。

方案一：使用 Bootstrap 网格的行内对齐（推荐） #

把每一组标题和内容放在同一个 row 里的两列，这样每一组都是独立的对齐单元，内容换行时标题会自动和内容的顶部对齐。如果需要四列布局，可以把两组「标题-内容」放在同一个大 row 里：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <!-- 第一组：Title1-3 和 Value1-3 -->
  <div class="row mb-3">
    <div class="col-md-6">
      <div class="row align-items-start">
        <!-- 标题列 -->
        <div class="col-md-6">
          <p>Title1:</p>
          <p>Title2:</p>
          <p>Title3:</p>
        </div>
        <!-- 内容列 -->
        <div class="col-md-6">
          <p>Value1</p>
          <p>Value2 Value2 Value2 Value2 Value2 Value2Value2 Value2 Value2</p>
          <p>Value3</p>
        </div>
      </div>
    </div>
    <!-- 第二组：Title4-8 和 Value4-8 -->
    <div class="col-md-6">
      <div class="row align-items-start">
        <!-- 标题列 -->
        <div class="col-md-6">
          <p>Title4</p>
          <p>Title5</p>
          <p>Title6</p>
          <p>Title7</p>
          <p>Title8</p>
        </div>
        <!-- 内容列 -->
        <div class="col-md-6">
          <p>Value4</p>
          <p>Value5</p>
          <p>Value6</p>
          <p>Value7</p>
          <p>Value8</p>
        </div>
      </div>
    </div>
  </div>
</div>

方案二：使用表格布局（简单直接） #

如果布局逻辑接近表格，直接用 Bootstrap 的表格组件，标题和内容天然对齐，同时支持响应式：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="table-responsive">
    <table class="table">
      <tbody>
        <tr>
          <td>Title1:</td>
          <td>Value1</td>
          <td>Title4</td>
          <td>Value4</td>
        </tr>
        <tr>
          <td>Title2:</td>
          <td>Value2 Value2 Value2 Value2 Value2 Value2Value2 Value2 Value2</td>
          <td>Title5</td>
          <td>Value5</td>
        </tr>
        <tr>
          <td>Title3:</td>
          <td>Value3</td>
          <td>Title6</td>
          <td>Value6</td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td>Title7</td>
          <td>Value7</td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td>Title8</td>
          <td>Value8</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

方案三：使用 Flexbox 手动控制对齐 #

利用 Bootstrap 的 Flex 工具类，让标题列和内容列的每一行都对应对齐，适合需要更自定义布局的场景：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-6 d-flex flex-column">
      <div class="d-flex">
        <span class="flex-shrink-0 me-2">Title1:</span>
        <span>Value1</span>
      </div>
      <div class="d-flex">
        <span class="flex-shrink-0 me-2">Title2:</span>
        <span>Value2 Value2 Value2 Value2 Value2 Value2Value2 Value2 Value2</span>
      </div>
      <div class="d-flex">
        <span class="flex-shrink-0 me-2">Title3:</span>
        <span>Value3</span>
      </div>
    </div>
    <div class="col-md-6 d-flex flex-column">
      <div class="d-flex">
        <span class="flex-shrink-0 me-2">Title4</span>
        <span>Value4</span>
      </div>
      <div class="d-flex">
        <span class="flex-shrink-0 me-2">Title5</span>
        <span>Value5</span>
      </div>
      <div class="d-flex">
        <span class="flex-shrink-0 me-2">Title6</span>
        <span>Value6</span>
      </div>
      <div class="d-flex">
        <span class="flex-shrink-0 me-2">Title7</span>
        <span>Value7</span>
      </div>
      <div class="d-flex">
        <span class="flex-shrink-0 me-2">Title8</span>
        <span>Value8</span>
      </div>
    </div>
  </div>
</div>

三个方案里，方案一最贴合 Bootstrap 的网格设计逻辑，既能保持响应式布局，又能完美解决标题和内容的对齐问题；方案二最简单，适合数据结构接近表格的场景；方案三灵活性最高，适合需要自定义样式的情况。

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