如何让Bootstrap同行卡片基于最长内容保持等高？

方法一：利用 Bootstrap 内置类 #

• 借助 Bootstrap 的 h-100 类让卡片占满父列高度，配合弹性布局类实现内容对齐：
  1. 卡片的父容器使用 Bootstrap 网格列（col-md-4 对应每行3张）
  2. 给卡片添加 h-100 类，强制卡片高度与同行最高卡片一致
  3. 如果需要将按钮等元素固定在卡片底部，给卡片添加 d-flex flex-column，并给底部元素加 mt-auto

示例代码：

<div class="row">
  <div class="col-md-4 mb-4">
    <div class="card h-100 d-flex flex-column">
      <div class="card-body">
        <h5 class="card-title">卡片标题1</h5>
        <p class="card-text">较短的卡片内容示例</p>
      </div>
      <div class="card-footer mt-auto">
        <a href="#" class="btn btn-primary">操作</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mb-4">
    <div class="card h-100 d-flex flex-column">
      <div class="card-body">
        <h5 class="card-title">卡片标题2</h5>
        <p class="card-text">较长的卡片内容示例，文本内容更多更长，用于测试等高效果文本内容更多更长，用于测试等高效果文本内容更多更长，用于测试等高效果</p>
      </div>
      <div class="card-footer mt-auto">
        <a href="#" class="btn btn-primary">操作</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mb-4">
    <div class="card h-100 d-flex flex-column">
      <div class="card-body">
        <h5 class="card-title">卡片标题3</h5>
        <p class="card-text">中等长度的卡片内容示例，文本长度介于前两者之间</p>
      </div>
      <div class="card-footer mt-auto">
        <a href="#" class="btn btn-primary">操作</a>
      </div>
    </div>
  </div>
</div>

方法二：自定义 CSS 实现 #

如果需要更灵活的控制，可以通过自定义 CSS 强制同行卡片等高：

1. 给卡片所在的行添加自定义类 equal-height-row
2. 使用 CSS 弹性布局属性实现等高：

.equal-height-row {
  display: flex;
  flex-wrap: wrap;
}

.equal-height-row .card {
  height: 100%;
}

对应的 HTML 结构：

<div class="row equal-height-row">
  <div class="col-md-4 mb-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">卡片内容</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary">操作</a>
      </div>
    </div>
  </div>
  <!-- 其余卡片结构同上 -->
</div>

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