Bootstrap如何让Card组件高度一致-Bootstrap教程-PHP中文网

真等高卡片必须让.col成为flex容器并提供高度基准：.col加d-flex h-100，.card加h-100，且禁用height/min-height；.card-body需d-flex flex-column h-100+flex-grow-1实现内部对齐。

直接给 .card 加 height 或 min-height 会截断内容或破坏响应式，真等高必须靠 flex 布局“拉伸”，关键在 .card 的**直接父容器**是否激活了 flex 并提供了高度上下文。

为什么 .row > .col > .card 默认不等高

因为 .col 默认不是 flex 容器，只是块级盒子；.row 虽然是 display: flex，但只对它的直接子元素（即 .col）生效，不会穿透到 .card 层级。所以每张卡仍按自身内容撑高，互不影响。

.col 缺少 d-flex → 无法控制子项交叉轴对齐
.col 没有显式高度（如 h-100）→ .card 的 h-100 无参考基准
.card 或 .card-body 上写了 height/min-height → 中断高度继承链

最稳方案：.col 加 d-flex h-100，.card 加 h-100

这是 Bootstrap 4/5 官方逻辑的延伸，零 JS、兼容性好、响应式安全。核心是让 .col 成为 flex 容器，并让它“有高度可被拉伸”，再让 .card 吃满它。

.col-md-4 这类列容器必须同时加 d-flex（激活 flex）和 h-100（提供高度基准）
.card 必须加 h-100，且不能有 height、min-height 或 flex: none 类打断继承
.card-img-top 建议统一设 height: 180px 或 min-height: 180px，避免图片尺寸差异导致视觉失衡

示例结构：

<div class="row">
  <div class="col-md-4 d-flex h-100">
    <div class="card h-100">
      <div class="card-body"></div>
    </div>
  </div>
  <div class="col-md-4 d-flex h-100">
    <div class="card h-100">
      <div class="card-body">文字少，但高度一样</div>
    </div>
  </div>
</div>

卡片内部内容对齐：.card-body 用 flex-column + flex-grow-1

外部等高后，标题、正文、按钮仍可能堆顶或悬浮——这是因为 .card-body 还是流式布局，没接管内部空间分配。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

.card-body 加 d-flex flex-column h-100，变成纵向弹性容器
正文加 flex-grow-1，吃掉中间空白
按钮加 mt-auto（不是 align-self-end），更稳定地沉底
避免在 .card-body 内设 height 或 min-height，否则会撑破或截断

别再用 .card-group 或 .card-deck

Bootstrap 5.3+ 已彻底移除 .card-group，继续使用会触发 Unknown pseudo-class selector ".card-group" 报错，且它强制平分宽度、禁用栅格响应式，与 .col 混用会错乱。而 .card-deck 是 v4 的 table-cell 实现，不支持断行、无法嵌套 flex/grid，现代项目应完全弃用。