默认卡片高度不一致是因为.card作为块级元素按内容撑高，无强制对齐；解决方法是给.row加d-flex、每张.card加h-100，并确保.card-body不打断高度继承链。
为什么默认卡片高度不一致？
Bootstrap 的 .card 默认是块级元素，各行内卡片各自“按内容撑高”，没有强制对齐机制。尤其当标题行数不同、图片尺寸不一、描述文字长短不一的时候，row 里的卡片会参差不齐——这不是 bug，是流式布局的自然表现。
- 卡片高度由内部最长子元素决定（比如某张卡多了一行文字）
-
.card-group在 Bootstrap 4 中已弃用，且它用 flex 包裹反而破坏栅格行为 - 直接写
height: 300px会切断响应性，小屏下溢出或留白严重
用 h-100 + d-flex 实现真等高
关键不是给卡片设固定高，而是让它们“拉伸填满父容器高度”。前提是父容器本身有明确高度上下文，而 Bootstrap 的 .row 默认是 content-fit 的，所以必须配合 d-flex 和 align-items-stretch（后者是 flex 默认值，但显式声明更稳妥）。
- 给
.row添加d-flex类（Bootstrap 4 需要；5 已默认启用） - 给每个
.col-*内的.card加h-100 - 确保
.card-body不用height或min-height打断继承链 - 示例结构：
<div class="row d-flex"> <div class="col-12 col-sm-6 col-md-4 col-xl-3"> <div class="card h-100"> <div class="card-body">...</div> </div> </div> </div>
移动端换行后还等高吗？
会，只要每行的卡片都套在同一个 .row 下，并且该 .row 没被其他 flex 容器包裹（比如嵌套了 .d-flex 的外层 div），就能保持单行内等高。但要注意：
- 小屏（
col-12）时每行只剩 1 张卡，等高失去意义，无需干预 - 中屏（
col-sm-6）变成两列，两张卡自动等高 - 大屏（
col-xl-3）四列，四张卡同高 —— 前提是它们都在同一个.row内，不能每张卡自己包一个.row - 如果用了
flex-wrap: wrap（如自定义容器），需额外加align-content: stretch控制多行间对齐
常见踩坑点：margin、图片、viewport
这些细节不处理，等高效果会失效或错位：
- 删除所有手动写的
margin-bottom，改用 Bootstrap 间距类如mb-3或响应式mb-md-4，否则 margin 会撑开父容器，破坏h-100计算 - 图片务必加
img-fluid，否则大图会溢出卡片，导致高度计算异常 - 忘记
<meta name="viewport" content="width=device-width, initial-scale=1">？那所有断点（sm、md）都不生效，col-sm-6形同虚设 - 在卡片里用了
position: absolute的元素？它会脱离文档流，不再参与高度计算——这种场景建议改用mt-auto+mb-0模拟底部对齐
等高不是靠“压”出来的，是靠 flex 布局的信任链传递高度。一旦中间某个容器没设 h-100，或者写了 overflow: hidden 却忘了 min-height，整条链就断了。
