Bootstrap默认.card不等高，需用flex或grid实现；.card-group在Bootstrap4中有效但有嵌套限制，Bootstrap5已移除；推荐手动用display:flex+h-100配合层级控制，关键在于确保高度继承链完整。
Bootstrap 默认的 .card 不会等高，必须主动干预；靠 display: flex 或 grid 容器控制，纯 CSS 类（如 .h-100）只在特定嵌套结构下生效，盲目加无效。
用 card-group 是最省事但有兼容限制
Bootstrap 4 提供了 .card-group，它把子 .card 设为 display: flex 并自动拉伸高度。但注意：
- 仅适用于 同级直系子元素，如果中间嵌了
<div class="row">或其他 wrapper，就失效 - Bootstrap 5 已 移除
.card-group，直接用display: flex替代 - 内部文字溢出时不会自动截断，需额外加
text-truncate或min-height防塌陷
手动用 display: flex + .h-100 控制（推荐 Bootstrap 5）
这是目前最可控的方式，关键在于层级和类的配合：
- 父容器（如
<div class="row">）本身不设高度，但它的直接子列（.col）要加h-100 - 每个
.card必须设h-100，且其父级（即.col）需是flex容器或至少能撑高 - 若卡片内有
.card-body，建议也加h-100，否则内边距可能让内容区不占满
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="row g-4">
<div class="col h-100">
<div class="card h-100">
<div class="card-body h-100">...</div>
</div>
</div>
<div class="col h-100">
<div class="card h-100">
<div class="card-body h-100">...</div>
</div>
</div>
</div>
避免踩坑：为什么加了 h-100 还不等高？
根本原因是高度继承链断裂 —— h-100 表示“继承父元素高度”，而默认父元素高度为 auto，所以没用。常见断点：
-
.row没设height或min-height，且未被上层 flex/gird 约束 -
.col外包了额外<div>，该<div>没加h-100，成了继承终点 - 用了
position: absolute或float的子元素，破坏了文档流高度计算 - 卡片里含图片未设
object-fit: cover或max-height，导致高度被撑开不一致
替代方案：grid 布局更简洁（现代浏览器优先）
如果你不需要支持 IE，用 CSS Grid 更直观：
- 父容器设
display: grid和grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) - 每张卡片直接加
height: 100%即可，Grid 自动对齐行高 - 无需层层加
h-100，也不依赖 Bootstrap 的栅格类
注意：Bootstrap 5 的 .row 默认不是 grid，得自己覆盖样式或换用 <div class="d-grid">。
真正卡住的往往不是“怎么写”，而是没意识到 h-100 是个继承型工具 —— 它不会凭空造高度，只负责把已有的高度往下传。检查每一层父元素是否真的“有高”，比反复试类名更有效。
