如何使用CSS Flexbox修复Bootstrap 4中卡片高度不一致的问题？-css教程-PHP中文网

加了h-100卡片仍不等高，是因为h-100仅继承父容器高度，而bootstrap 4中.col默认无显式高度、由内容撑开；若中间多套容器、.col被设height/min-height/overflow、.card-body含height限制或图片未加载完成，均会中断高度继承链。

如何使用css flexbox修复bootstrap 4中卡片高度不一致的问题？

为什么加了 `h-100` 卡片还是不等高

因为 h-100 只是“继承父容器 100% 高度”，而 Bootstrap 4 的 .col 默认没有显式高度，它由内容撑开——如果卡片内容少，.col 高度就小，h-100 拉的也是这个小高度。

常见断链点：

.card 的直接父元素不是 .col（比如中间多套了一层 <div>），<code>h-100 就卡在半路
.col 上写了 height、min-height 或 overflow: hidden，会截断高度继承
.card-body 里用了 height: 200px 或 min-height: 100%，覆盖了 h-100 的拉伸效果
图片加载慢，.card 初始渲染时高度为 0，h-100 拉的也是 0 —— 建议加 min-height: 200px 兜底

必须给 `.col` 加 `d-flex` 和 `h-100`

Bootstrap 4 的 .row 默认是 display: flex，但 .col 只是 flex 项目，不是 flex 容器。要让 .card 等高，关键是要让它的**直接父容器**（即 .col）变成 flex 容器，并具备可被继承的高度。

正确做法：

每个 .col 都加 d-flex（激活 flex）和 h-100（提供高度基准）
.card 加 h-100，且不能有 height、min-height 或 flex: none 类打断继承
避免在 .card 上写 flex: 1 —— 它不是 .row 的直系子项，加了无效

示例结构：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

<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>

卡片内部内容对齐到底部按钮

即使外部高度统一了，标题短、文字少的卡片里按钮还是会往上浮。这不是靠 margin-top 调整的事，得用 flex-column 接管内部排列逻辑。

关键条件：

.card 和 .card-body 都要加 h-100，否则内部 flex 无高度参考
.card-body 加 d-flex flex-column，让它成为纵向弹性容器
正文区域（如 .card-text）加 flex-grow-1，自动占满中间空白
按钮加 mt-auto（不是 align-self-end），更可靠地推到底部

响应式下等高突然失效怎么办

大屏正常、小屏崩掉，大概率是媒体查询或响应式类悄悄破坏了 flex 链路：

检查自定义 CSS 是否含类似 @media (max-width: 768px) { .row { align-items: flex-start !important; } }
.d-md-flex 在小屏会退化为 display: block，应改用 d-flex d-md-flex
Bootstrap 4 项目里硬加 d-flex 到 .row 可能破坏 float 栅格，需同步处理清除浮动或改用 flex 专用栅格
IE11 下 flex: 1 不稳，建议用 flex: 1 1 auto，避免 flex-basis: 0 导致卡片塌缩