真等高卡片必须让.col成为flex容器并提供高度基准：.col加d-flex h-100，.card加h-100，且禁用height/min-height；.card-body需d-flex flex-column h-100+flex-grow-1实现内部对齐。
直接给 .card 加 height 或 min-height 会截断内容或破坏响应式，真等高必须靠 flex 布局“拉伸”，关键在 .card 的**直接父容器**是否激活了 flex 并提供了高度上下文。
为什么 .row > .col > .card 默认不等高
因为 .col 默认不是 flex 容器，只是块级盒子；.row 虽然是 display: flex，但只对它的直接子元素（即 .col）生效，不会穿透到 .card 层级。所以每张卡仍按自身内容撑高，互不影响。
-
.col缺少d-flex→ 无法控制子项交叉轴对齐 -
.col没有显式高度（如h-100）→.card的h-100无参考基准 -
.card或.card-body上写了height/min-height→ 中断高度继承链
最稳方案：.col 加 d-flex h-100，.card 加 h-100
这是 Bootstrap 4/5 官方逻辑的延伸，零 JS、兼容性好、响应式安全。核心是让 .col 成为 flex 容器，并让它“有高度可被拉伸”，再让 .card 吃满它。
-
.col-md-4这类列容器必须同时加d-flex（激活 flex）和h-100（提供高度基准） -
.card必须加h-100，且不能有height、min-height或flex: none类打断继承 -
.card-img-top建议统一设height: 180px或min-height: 180px，避免图片尺寸差异导致视觉失衡
示例结构：
<div class="row">
<div class="col-md-4 d-flex h-100">
<div class="card h-100">
<div class="card-body"></div>
</div>
</div>
<div class="col-md-4 d-flex h-100">
<div class="card h-100">
<div class="card-body">文字少，但高度一样</div>
</div>
</div>
</div>
卡片内部内容对齐：.card-body 用 flex-column + flex-grow-1
外部等高后，标题、正文、按钮仍可能堆顶或悬浮——这是因为 .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，否则会撑破或截断
别再用 .card-group 或 .card-deck
Bootstrap 5.3+ 已彻底移除 .card-group，继续使用会触发 Unknown pseudo-class selector ".card-group" 报错，且它强制平分宽度、禁用栅格响应式，与 .col 混用会错乱。而 .card-deck 是 v4 的 table-cell 实现，不支持断行、无法嵌套 flex/grid，现代项目应完全弃用。
- 查控制台是否有
Unknown pseudo-class selector ".card-deck"错误，有则说明 CSS 解析失败 - 如果旧项目里它“还能用”，大概率是自定义 CSS 或第三方插件兜底，非 Bootstrap 原生行为
- 替代方案只有两个：用
d-flex + h-100组合，或改用原生display: grid（需放弃 IE 支持）
最容易被忽略的是：.col 上漏掉 h-100 —— 它没有显式高度时，.card 的 h-100 就是无效的；还有图片没加 img-fluid 导致溢出，也会破坏整体高度计算。
