卡片高度错乱的根源是响应式断点下.col未设d-flex h-100导致等高失效，需三层联动：.col提供flex上下文与高度基准，.card继承拉满，.card-body用d-flex flex-column h-100再分配内部空间。
为什么卡片在不同分辨率下高度会错乱
不是 CSS 写错了，而是响应式断点切换时，.col 的宽度变化导致其内部 .card 的高度继承链被意外截断。比如 col-md-4 在中屏下是三列，col-sm-6 在小屏下变成两列——但若没给每张卡的直接父容器（即 .col）显式加 d-flex h-100，它在小屏下仍按内容撑高，等高就失效了。
-
.row默认是 flex 容器，但它只对直接子元素（.col）生效，不会穿透到.card -
h-100在没有高度上下文的父容器上等于无效：小屏时.col高度由内容决定，h-100拉的还是“0” - 媒体查询里覆盖了
d-flex或重写了align-items，会导致 flex 行为在某断点消失
必须给 .col 加 d-flex h-100，而不是 .row 或 .card-body
.col 是 .card 的**直接父容器**，也是唯一能同时提供 flex 上下文和高度基准的位置。加在 .row 上没用，加在 .card-body 上反而会打断继承链。
-
.col-md-4、.col-sm-6这类类名必须**同时搭配**d-flex和h-100 - 不要写
height: 100%或min-height: 300px—— 会破坏响应式，小屏溢出或留白 - 如果用了嵌套结构（比如
.col > div > .card），h-100就断在中间那层div，必须删掉或加d-flex h-100 - Bootstrap 5.3+ 中
.card-group已彻底移除，继续用会触发Unknown pseudo-class selector ".card-group"报错
图片尺寸差异会让等高“看起来不一致”
即使所有 .card 高度拉满，.card-img-top 如果原始比例不同，object-fit: cover 会裁剪不同区域，造成视觉错觉——一张卡露出人脸，另一张只露肩膀，用户会觉得“高度不对”。这不是高度问题，是构图失衡。
- 统一设
.card-img-top { height: 180px; object-fit: cover; object-position: center; } - 或者用
aspect-ratio: 4/3（现代浏览器支持），比固定height更适应缩放 - 避免用
img { width: 100%; height: auto }—— 这会让图片高度浮动，直接破坏等高前提 - 加载慢时图片占位空白，建议给
.card加min-height: 250px兜底，防止初始渲染塌陷
卡片内部文字和按钮对齐要靠 card-body 的 flex-column
外部等高只是第一步。.card-body 仍是流式布局，标题短、文字少的卡片里，按钮会堆顶；文字多的又可能把按钮挤出视口。必须让 .card-body 自己接管空间分配。
-
.card-body加d-flex flex-column h-100，变成纵向弹性容器 - 正文
<p class="card-text">加flex-grow-1，吃掉中间空白 - 按钮加
mt-auto（不是align-self-end），更稳定地沉底 - 别在
.card-body里写height或min-height—— 会覆盖h-100，导致内部 flex 失效
复杂点在于：等高不是单点设置，而是三层联动——.col 提供 flex + 高度基准，.card 继承并拉满，.card-body 再做内部空间再分配。漏掉任何一层，都会在某个断点突然崩掉。
