如何让Bootstrap卡片内两列中的按钮实现底部对齐？

问题核心是你把内容区和按钮区分成了两个独立的<div class="row">，导致按钮无法和所在列的内容高度联动。用Bootstrap原生的flex类就能轻松解决，不需要额外CSS：

• 把每一列（col-6）设置为垂直flex容器：给每个col-6添加d-flex flex-column类，让列内元素垂直排列
• 将按钮放在对应列的内容下方，用mt-auto类让按钮自动顶到列的底部
• 移除原来独立的按钮行，把按钮整合到各自的列中

修改后的完整代码：

<div class="card">
  <h5 class="card-header"> Header </h5>
  <div class="card-body">
    <div class="row">
      <!-- 第一列：设置为flex垂直布局 -->
      <div class="col-6 d-flex flex-column">
        <h6 class="card-title">Sub-header 1</h6>
        <p class="form-text"> description 1 </p>
        <!-- 按钮用mt-auto推到底部 -->
        <a href="#" class="btn btn-primary mt-auto align-self-start" role="button">Click!</a>
      </div>

      <!-- 第二列：同样设置flex垂直布局 -->
      <div class="col-6 d-flex flex-column">
        <h6 class="card-title">Sub-header 2</h6>
        <p class="form-text"> description 2 </p>
        <a href="#" class="btn btn-primary mt-auto align-self-start" role="button">Or Me?</a>
      </div>
    </div>
  </div>
</div>

额外说明：

• 原来card-body上的d-flex flex-column可以去掉，现在每一列单独做flex布局，更贴合两列各自的高度对齐需求
• 如果需要按钮右对齐，把align-self-start换成align-self-end即可

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