Bootstrap 5 卡片等高需让 .col 成为 flex 容器并使 .card 拉满其高度，推荐用 row-cols-* 类自动实现；图片须加 img-fluid、间距用工具类、viewport 元标签不可少。
bootstrap 5 的 .row 默认就是 display: flex，但卡片高度不一致不是因为 flex 没启用，而是 .card 没被拉伸填满父容器高度——必须让每张卡“感知”到父列的高度上下文。
为什么加了 row + col 还是高度不齐
根本原因是 .col 默认没有明确高度，.card 只能按自身内容撑高；即使 .row 是 flex 容器，.card 的直接父级（即 .col）不是 flex 容器，align-items: stretch 不会穿透两层生效。
-
.col是块级流容器，不提供高度约束，h-100在它身上无效 - 常见错误：只给
.row加d-flex（BS5 不需要），却没处理.col和.card的层级关系 - 图片未加
img-fluid或缺失时，高度计算异常，进一步放大错位
用 d-flex + h-100 强制等高（兼容所有 BS5 版本）
最稳方案是让 .card 的**直接父元素**（也就是 .col）成为 flex 容器，并让 .card 拉满它。
- 给每个
.col-*加d-flex类，激活其 flex 上下文 - 给每个
.card加h-100，它就能拉伸填满.col高度 -
.card-body内部若需文字占满剩余空间，可加d-flex flex-column和flex-grow-1 - 避免在
.card或.col上写height、min-height，否则破坏h-100继承链
示例结构：
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-3 d-flex">
<div class="card h-100">
<div class="card-body d-flex flex-column h-100">
<h5 class="card-title">标题</h5>
<p class="card-text flex-grow-1">正文</p>
<button class="btn btn-primary mt-auto">操作</button>
</div>
</div>
</div>
<!-- 更多卡片同理 -->
</div>用 row-cols-* 替代手动写断点类（BS5.1+ 推荐）
row-cols-* 是 BS5 新增的“行内列数控制类”，它会在 .row 上自动设置 flex-wrap 和每列的 flex: 0 0 auto，并隐式触发等高对齐，比手写 col-* 更简洁。
-
row-cols-1→ 小屏单列，row-cols-sm-2→ ≥576px 两列，row-cols-md-3→ ≥768px 三列 - 无需给
.col加d-flex，也无需每个.card加h-100，卡片天然等高 - 注意：
row-cols-*会覆盖子元素的宽度类（如col-md-4），所以不要混用 - 如果需要响应式列数 + 自定义列宽（比如某列固定 250px），就得退回
col-*+d-flex方案
示例：
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3"> <div class="col"><div class="card">...</div></div> <div class="col"><div class="card">...</div></div> <!-- 其他卡片直接放 .col 里，不写具体断点 --> </div>
图片、间距、viewport 这三个细节一错，等高就失效
等高布局看着简单，实际极易被边缘因素破坏。这三个点几乎每次调试都会遇到。
-
<img alt="Bootstrap 5 栅格系统实现等高的卡片布局" >必须加class="card-img-top img-fluid"，否则大图溢出或裁剪异常，导致高度计算失真 - 所有手动写的
margin/padding必须换成 Bootstrap 间距工具类（如mb-3、pt-2），否则 flex 下 margin 折行或撑开父容器 -
<meta name="viewport" content="width=device-width, initial-scale=1">缺失会导致sm/md断点完全不生效，col-sm-6形同虚设
真正麻烦的不是写法本身，而是这些细节一旦漏掉，浏览器不会报错，只会默默渲染出错位效果——你得盯着 DOM 树一层层查 computed height 才能定位。
