Bootstrap 5卡片高度一致且底部按钮对齐问题求助

要实现卡片高度统一且按钮底部对齐，结合Bootstrap的Flex工具类就能解决，具体操作如下：

1. 给每个card元素添加h-100类，确保所有卡片占满父容器高度，实现高度一致。
2. 给card-body添加d-flex flex-column类，将卡片内容区域转为垂直方向的Flex布局。
3. 给卡片底部的按钮添加mt-auto类，利用Flex的自动外边距特性，让按钮自动对齐到卡片底部。

完整代码示例：

<div class="row g-4">
  <div class="col-md-4">
    <div class="card h-100">
      <img src="示例图片地址" class="card-img-top" alt="卡片图片">
      <div class="card-body d-flex flex-column">
        <h5 class="card-title">卡片标题1</h5>
        <p class="card-text">这里是较长的卡片文本内容，用来模拟不同长度的情况，测试按钮是否能底部对齐。这里是较长的卡片文本内容，用来模拟不同长度的情况，测试按钮是否能底部对齐。</p>
        <a href="#" class="btn btn-primary mt-auto">操作按钮</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-100">
      <img src="示例图片地址" class="card-img-top" alt="卡片图片">
      <div class="card-body d-flex flex-column">
        <h5 class="card-title">卡片标题2</h5>
        <p class="card-text">短文本内容</p>
        <a href="#" class="btn btn-primary mt-auto">操作按钮</a>
      </div>
    </div>
  </div>
</div>

关键类说明 #

• h-100：强制卡片高度与同排其他卡片一致，避免因内容长度差异导致高度不一。
• d-flex flex-column：将卡片内容区域设置为垂直Flex容器，使内部元素可按垂直方向灵活排列。
• mt-auto：给按钮添加顶部自动外边距，Flex布局下会自动将按钮推至容器底部，实现对齐效果。

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