bootstrap 5 卡片等高需用 css flex 布局：.row 默认 flex，子列与卡片均加 .h-100；含 header/footer 时卡片加 .d-flex.flex-column，body 加 .flex-fill；避免 js 计算高度。
Bootstrap 5 的 .card 默认不会等高，尤其在网格（.row + .col）中内容高度不一致时，卡片会“参差不齐”。解决方法不是靠 JS 计算，而是用 CSS 原生能力——关键在 display: flex 和容器约束。
用 .row + .g-0 配合 .h-100 强制子项拉伸
这是最轻量、兼容性最好的方案。前提是卡片必须放在 .row 容器内，且该行需设为 flex 布局（Bootstrap 5 默认就是），再让每张卡片撑满父高。
-
.row默认是display: flex，但子项（.col）默认不拉伸高度，需显式加.h-100 -
.col内部的.card也要加.h-100，否则卡片自身高度仍由内容决定 - 避免额外 margin 破坏等高，推荐用
.g-0清除列间距，或改用.g-*控制间隙（不能用mb-*类乱加下边距）
<div class="row g-0">
<div class="col-md-4 h-100">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">短标题</h5>
<p>内容少</p>
</div>
</div>
</div>
<div class="col-md-4 h-100">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">长标题很长很长</h5>
<p>内容多……</p>
</div>
</div>
</div>
</div>
遇到 card-header 或 card-footer 时高度计算容易错乱
当卡片含固定区域（如 .card-header），单纯 h-100 会导致 .card-body 溢出或高度塌陷——因为 .card 默认是普通文档流布局，不是 flex 容器。
- 必须把
.card设为 flex：加class="d-flex flex-column" -
.card-body加class="flex-fill"，让它自动填满剩余空间 -
.card-header和.card-footer保持自然高度，不设固定height
<div class="card h-100 d-flex flex-column"> <div class="card-header">头部</div> <div class="card-body flex-fill"><p>这里会自适应拉伸</p></div> <div class="card-footer">底部</div> </div>
响应式断点下等高失效？检查 .col 是否在所有断点都带 h-100
如果只在 md 断点加 .h-100（如 .h-md-100），小屏堆叠后 .col 变成块级、单列显示，h-100 就失去意义——此时父容器（.row）高度由最高那张卡片决定，其他卡片无法对齐。
- 移动端通常不需要等高，视觉上反而是「各自适配」更合理
- 若真要全断点等高，得给所有
.col加.h-100（非响应式版本），并确保其父.row有明确高度（比如min-height: 300px）或被更高层容器约束 - 注意：Safari 旧版对
flex + height: 100%支持不稳定，可补min-height: 0到.card防止 flex item 不收缩
别用 JS 动态计算高度来“修复”等高
常见错误是监听窗口 resize 后遍历 .card 取 offsetHeight 再统一设 style.height。这不仅性能差、破坏响应式，还会导致：
- 卡片内图片加载完成前高度误判
- 字体加载（
@font-face）引发重排，需二次修正 - 打印样式或暗色模式切换时失效
- 与 Bootstrap 5 的 utility-first 逻辑冲突，维护成本陡增
真正需要动态场景（比如卡片内容异步加载后才确定高度），应优先用 CSS aspect-ratio 或 grid-template-rows: 1fr 替代；实在绕不开 JS，也该用 ResizeObserver 监听，而非轮询 offsetHeight。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
