卡片高度不一致不是bug，是Bootstrap默认流式布局的自然结果；必须激活父容器Flex行为并确保子卡片能拉伸填满，关键在直接父容器是否具备高度上下文和flex控制权。
卡片高度不一致不是 bug，是 bootstrap 默认流式布局的自然结果；要让多个 .card 高度一致，必须激活父容器的 flex 行为，并确保子卡片能拉伸填满——关键不在卡片本身，而在它的**直接父容器**是否具备高度上下文和 flex 控制权。
为什么 .row > .col > .card 默认不等高
因为 .col 默认不是 Flex 容器，它只是个块级盒子，内部 .card 各自按内容撑高；.row 虽然在 Bootstrap 4/5 中默认是 display: flex，但它只对直接子元素（即 .col）生效，不对 .col 的子元素（.card）做交叉轴对齐。所以即使 .row 是 flex，.card 依然“各自为政”。
常见错误现象包括：
- 同一行里，一张卡有 3 行标题 + 图片 + 长描述，另一张只有 1 行标题 + 短文本，高度差明显
- 用
.card-deck（v4）或.card-group（v4 已废弃）后发现响应式失效、列宽错乱或控制台报Unknown pseudo-class selector ".card-deck"
最稳方案：给 .col 加 d-flex h-100，给 .card 加 h-100
这是 Bootstrap 4/5 官方推荐路径的延伸，兼容性好、无 JS 依赖、响应式安全。核心逻辑是：让 .col 成为 Flex 容器并拥有“可被拉伸”的高度上下文，再让 .card 继承并占满它。
-
.col必须加d-flex（激活 flex）+h-100（提供高度基准；若父级.row高度由内容决定，.col默认无显式高度，h-100才能生效） -
.card必须加h-100，且不能有height、min-height或flex: none类打断继承链 -
.card-body内避免设height或min-height，否则会截断或撑破整体高度 - 若卡片含
.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">
<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>
遇到 IE11 兼容需求时怎么处理
IE11 支持老版 Flexbox，但不识别 flex: 1 1 auto 或 flex-basis: auto，也不能稳定解析 min-height 在 flex 子项上的行为。
- 必须写前缀：
display: -ms-flexbox; display: flex -
.card上用-ms-flex: 1; flex: 1，不要写三值语法 - 避免在
.card或.card-body上设min-height，改用height: 100%+overflow: hidden防撑破 - 若仍错位，可在
.col上补style="min-height: 200px;"提供基础高度兜底
别踩这些坑
最容易被忽略的不是语法，而是高度链断裂点：
-
.col没加h-100→ 即使.card有h-100也无效，因为父级高度是auto -
.card外层多套了一层<div>（比如为了加边框或阴影），但没同步加h-100→ 高度继承链在这一层就断了 - 用了
.card-img-top但图片加载慢，导致初始渲染时卡片高度塌缩，后续图片加载完成才跳变 → 建议配合imagesLoaded或预设aspect-ratio（现代浏览器）或padding-top占位 - 在
.card-body里用了position: absolute的元素（如 badge），未设top: 0或bottom: 0→ 可能脱离文档流，影响高度计算
真正卡住的往往不是“怎么写”，而是“哪一级该承担高度责任”——卡片自己不定义高度，它只负责填满上级给的容器；而那个容器，必须明确知道自己有多高。
