Bootstrap网格4列布局：段落水平对齐问题

这个问题在响应式布局里很常见——当不同列的<h2>因为内容长度不同出现换行时，高度差异会把下面的<p>标签挤到不同垂直位置。下面给你几个Bootstrap 4原生支持的灵活解决方案：

方案一：用Flexbox工具类实现自动对齐（推荐） #

Bootstrap 4本身内置了完善的Flexbox工具类，不需要写额外CSS就能搞定：

给每一列添加d-flex flex-column，把列变成垂直方向的Flex容器，然后给<p>标签加上mt-auto，让它自动推到容器底部，不管上面的<h2>高度如何，所有列的段落都会对齐。

<div class="container">
  <div class="row">
    <!-- 第一列 -->
    <div class="col-md-4 d-flex flex-column">
      <img src="your-logo.png" alt="品牌Logo" class="mb-3">
      <h2 class="mb-4">这是一个会换行的较长标题内容</h2>
      <p class="mt-auto">这里是段落内容，不管标题是否换行，我都会和其他列的段落对齐</p>
    </div>
    <!-- 第二列 -->
    <div class="col-md-4 d-flex flex-column">
      <img src="your-logo.png" alt="品牌Logo" class="mb-3">
      <h2 class="mb-4">短标题</h2>
      <p class="mt-auto">这里是段落内容，不管标题是否换行，我都会和其他列的段落对齐</p>
    </div>
    <!-- 第三列 -->
    <div class="col-md-4 d-flex flex-column">
      <img src="your-logo.png" alt="品牌Logo" class="mb-3">
      <h2 class="mb-4">这是一个超级长的标题，在小屏幕上会换行好几次测试效果</h2>
      <p class="mt-auto">这里是段落内容，不管标题是否换行，我都会和其他列的段落对齐</p>
    </div>
  </div>
</div>

原理：mt-auto会让段落的上边距自动填充容器内<h2>和底部的剩余空间，强制所有段落固定在同一垂直位置。

方案二：自定义CSS固定标题最小高度 #

如果你不想用Flex，也可以给<h2>设置一个足够大的min-height，确保最长的标题换行后也不会超过这个高度，让所有标题区域高度统一：

首先添加自定义CSS：

.fixed-height-title {
  min-height: 70px; /* 根据你的标题字体大小、最长内容调整这个值 */
}

然后在HTML里给<h2>加上这个类：

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <img src="your-logo.png" alt="品牌Logo" class="mb-3">
      <h2 class="fixed-height-title mb-4">会换行的标题</h2>
      <p>这里是段落内容</p>
    </div>
    <!-- 其他列同理 -->
  </div>
</div>

注意：这个方法的缺点是不够灵活，如果后续标题长度变化很大，需要手动调整min-height的值。

方案三：用Bootstrap Card组件快速实现 #

Bootstrap的Card组件自带高度对齐的特性，把每列内容放进Card里，配合Flex工具类也能轻松实现效果：

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="card h-100">
        <div class="card-body d-flex flex-column">
          <img src="your-logo.png" alt="品牌Logo" class="mb-3">
          <h2 class="card-title mb-4">可能换行的标题</h2>
          <p class="card-text mt-auto">这里是段落内容</p>
        </div>
      </div>
    </div>
    <!-- 其他列同理 -->
  </div>
</div>

原理：h-100让Card占满所在列的高度，内部的d-flex flex-column和mt-auto同样实现了段落的底部对齐。

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