加了h-100卡片仍不等高，是因为h-100仅继承父容器高度，而Bootstrap 4中.col默认无显式高度、由内容撑开；若中间多套容器、.col被设height/min-height/overflow、.card-body含height限制或图片未加载完成，均会中断高度继承链。
为什么加了 h-100 卡片还是不等高
因为 h-100 只是“继承父容器 100% 高度”，而 Bootstrap 4 的 .col 默认没有显式高度，它由内容撑开——如果卡片内容少，.col 高度就小，h-100 拉的也是这个小高度。
常见断链点：
-
.card的直接父元素不是.col（比如中间多套了一层<div>），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 容器，并具备可被继承的高度。
正确做法：
立即学习“前端免费学习笔记（深入）”；
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 每个
.col都加d-flex（激活 flex）和h-100（提供高度基准） -
.card加h-100，且不能有height、min-height或flex: none类打断继承 - 避免在
.card上写flex: 1—— 它不是.row的直系子项，加了无效
示例结构：
<div class="row">
<div class="col-md-4 d-flex h-100">
<div class="card h-100">
<img src="..." class="card-img-top">
<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导致卡片塌缩
真正卡住的点往往不在卡片本身，而在 .col 是否被当成 flex 容器、高度是否被某处 min-height 或 overflow 截断、以及图片加载时机带来的初始高度计算偏差——这些细节不处理，h-100 就只是个摆设。
