如何在Bootstrap 4卡片的底部定位按钮？

可以实现，直接用Bootstrap原生自带的工具类即可完成，不需要额外编写自定义CSS。

核心逻辑 #

利用Flex布局的剩余空间分配特性，让卡片的正文区域自动填充所有空白高度，将按钮挤压到卡片最底端。

具体代码实现 #

单卡片基础结构 #

<div class="card h-100">
  <img src="示例图地址" class="card-img-top" alt="卡片头图">
  <div class="card-body d-flex flex-column">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text mb-auto">这里是卡片正文内容，无论这段文字长度多少，剩余的空白都会被自动填充，按钮始终固定在底部。</p>
    <a href="#" class="btn btn-primary mt-3">底部按钮</a>
  </div>
</div>

关键类说明 #

• h-100：给外层卡片添加，保证卡片占满父容器高度，和同组其他卡片保持高度一致
• d-flex flex-column：给card-body添加，将卡片内容区域设置为纵向Flex布局容器
• mb-auto：给正文内容添加，自动抢占容器内所有剩余的纵向空白空间，把后续元素推到容器底部
• mt-3：给按钮添加，预留按钮和正文之间的上边距，避免内容紧贴

多卡片等高场景写法 #

如果是多个卡片放在栅格行内统一等高，结构如下：

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <!-- 卡片内部结构和上面的单卡片一致 -->
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <!-- 哪怕这张卡片正文内容更短，按钮也会和其他卡片的按钮对齐在同一高度 -->
    </div>
  </div>
  <!-- 更多卡片结构同上 -->
</div>

注意事项 #

• 该方法同时兼容Bootstrap 4和Bootstrap 5两个主流版本
• 如果卡片带有card-footer页脚区块，直接把按钮放在页脚内即可，无需额外调整Flex属性，外层加h-100就能保证页脚固定在卡片底部

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