根本原因是.card的直接父容器（如.col）缺乏高度基准，需同时满足是flex容器且有明确高度或最小高度，否则h-100无法继承有效高度。
为什么加了 d-flex + h-100 还是不等高
根本原因不是类没加对，而是 .card 的直接父容器（比如 .col）本身没有可测量的高度基准。Bootstrap 4 的 .row 默认是 display: flex，但它的子元素 .col 是 flex item，不是 flex 容器——.card 在它里面仍是普通块级元素，h-100 没有“100% 谁的高度”可继承。
常见失效场景：
-
.col父级（如.row）高度由内容撑开，而某列内容极短 →h-100计算结果为 0 -
.col上写了height、min-height或flex: none→ 强制锁定自身尺寸，阻断拉伸链 -
.card内部有position: absolute元素 → 所在列报告高度为 0，h-100失去参考 - 嵌套了额外的
.row，例如.col > .row > .card→.card不再是.col的直接子元素，h-100失效
必须确保 .col 是 Flex 容器且有高度上下文
只给 .row 加 d-flex 不够，.card 要等高，它的**直接父级**必须同时满足两个条件：是 flex 容器 + 有明确高度或最小高度。
正确做法：
- 在
.col上加d-flex和h-100（BS4 必须双加） - 确保
.col的父级（通常是.row）至少有min-height，例如min-height: 200px或min-height: 100vh - 避免在
.col上写height: 100%—— 它不会继承.row的高度，除非.row自身有确定高度 - 如果用响应式断点（如
.col-md-4），检查对应媒体查询是否意外覆盖了display或align-items
卡片内部元素破坏拉伸的典型干扰项
.card 本身设了 h-100，不代表内部所有子元素都会被拉伸填满。某些默认样式会悄悄打断高度传递：
-
.card-img-top默认height: auto且无max-width: 100%→ 图片可能撑宽列但不触发拉伸 -
.card-body没加d-flex flex-column h-100→ 内部文本、按钮仍按内容堆叠，底部留白不均 -
.card-footer或.card-header设了flex-shrink: 0但没配flex-basis→ 可能压缩其他区域，间接导致视觉不齐 - 文字容器（如
<p></p>）未设word-break: break-word→ 长 URL 或无空格文本横向撑破列宽，影响高度计算
别混淆列等高和卡片等高
列等高（.col 拉齐） ≠ 卡片等高（.card 拉齐）。前者靠 .row 的 align-items: stretch；后者必须让 .card 的直接父级成为 flex 容器，并靠 h-100 继承高度。
最容易被忽略的一点是：.card 的 border 和 box-shadow 不参与高度计算，但 padding 会增加内部内容高度——如果各卡片 .card-body 的 padding 不一致，即使外部高度拉齐，内容区看起来依然错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
