Bootstrap卡片等高需确保.card直接父元素（如.col）为flex容器并设d-flex+align-items-stretch，再配合.card的h-100；避免使用已废弃的.card-deck/.card-group。
Bootstrap卡片高度不一致，根本不是样式没写对，而是默认布局机制没被正确触发——.card 本身不是 flex 子项，.row 的 align-items: stretch 对它无效。
为什么加了 h-100 还是不等高
h-100 不是万能的，它只表示“占满父容器 100% 高度”，但前提是父容器得有高度可被继承。而 Bootstrap 的 .col 默认高度由内容撑开，没有内容时就是 0；.row 也不会给子列设最小高度。
- 检查
.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和align-items-stretch（后者可省略，因是默认值） - 同时给
.card加h-100，让它填满.col的高度 - 若卡片内含
.card-img-top，注意它默认object-fit: cover，等高后可能裁剪严重，建议统一设height: 180px或min-height: 180px - 不要给
.card加flex: 1—— 它不是.row的直系子项，加了也没用 - 检查自定义 CSS 是否含类似
@media (max-width: 768px) { .row { align-items: flex-start !important; } } - Bootstrap v4 的
.d-md-flex类在小屏会退化为display: block，导致 flex 失效，应改用d-flex d-md-flex - v3 项目里硬加
d-flex到.row可能导致.col塌陷，因为 v3 默认是 float 布局，需同步处理清除浮动或改用 flex 专用栅格 - IE11 下
flex: 1 1 auto更稳，避免用flex-basis: 0，否则内容少的卡片可能塌缩成一条线 - 已存在的项目请立刻搜索并替换掉所有
card-deck和card-group - 替代方案就是上面说的
d-flex + h-100组合，它不依赖废弃组件，兼容 v4/v5，也便于调试 - 如果旧项目必须兼容 v3，别强推 flex，改用 JS 方案：遍历同排卡片，取最大
offsetHeight后统一设min-height
用 d-flex 强制让 .col 成为 Flex 容器
真正起作用的是让 .card 的**直接父容器**变成 flex 容器，并启用交叉轴拉伸。在 Bootstrap 4 中 .row 是 flex，但 .col 不是；v5 虽默认 .row 是 flex，但 .col 仍只是 flex 项目，不是容器。
响应式下等高突然失效的常见原因
等高在大屏正常、小屏崩掉，90% 是媒体查询里悄悄重写了 flex 行为。
立即学习“前端免费学习笔记（深入）”；
别碰 .card-deck 和 .card-group
这两个类在 Bootstrap 4 中已被标记为废弃，v5.3+ 彻底移除。继续用会触发警告，甚至报错 Unknown pseudo-class selector ".card-deck"，且它们内部用的 flex 包裹逻辑会破坏 .row > .col 的原有栅格流，导致换行异常或宽度错乱。
最常被忽略的一点：等高不是靠“压”出来的，是靠“撑”和“拉”配合完成的——.col 得先有高度（哪怕只是 min-height），.card 才有东西可拉；而这个高度来源，往往藏在某个没被注意到的父级 padding 或 margin 里。
