加了h-100仍不等高，根本原因是高度继承链中断：父元素高度为auto导致100%无效；.row未约束高度、.col外多层div未加h-100、.card内联样式或图片溢出、align-items-stretch被覆盖或失效、响应式换行结构干扰及细节样式污染。
为什么加了 h-100 还不等高
根本不是类没生效，而是高度继承链断在了中间——h-100 只表示“占父元素 100% 高”，但若父元素自身高度是 auto（默认值），那 100% 就等于 0。
-
.row没设min-height或没被上层容器约束，它就按内容撑开，无法提供参考高度 -
.col外多套了一层<div>，且该层没加h-100，成了高度继承的终点 -
.card里写了height: 300px、min-height: 200px或用了flex: none，直接打断h-100的传递 - 图片没加
img-fluid，原始尺寸溢出卡片，撑高了整个.card，导致h-100实际拉伸的是一个已被撑开的高度
align-items-stretch 被忽略的常见原因
.row 默认是 flex 容器，但 align-items 在某些场景下并不自动生效，尤其当子项不是直接 .col 时。
-
.card没包在.col里，而是直接放在.row下——这时.card是 flex 项目，但 Bootstrap 的.row并未对非.col子项做样式适配，align-items-stretch对它无效 -
.col上用了float或position: absolute，脱离文档流，不再参与 flex 交叉轴对齐 - 自定义 CSS 覆盖了
align-items，比如全局重置了* { align-items: flex-start } - Bootstrap 4 中
.row默认不是 flex，必须显式加d-flex；而 Bootstrap 5 虽默认 flex，但若引入了旧版 reset 或第三方 UI 库，可能覆盖了默认行为
图片和文字导致视觉“假等高”
卡片外部高度一致了，但顶部图片裁剪不同、文字基线浮动，看起来还是不对齐——这不是高度问题，是构图和排版失控。
-
.card-img-top没统一容器高度，原始图片比例各异，object-fit: cover裁剪位置不同，一张露脸一张只留背景 - 解决方案：给
.card-img-top显式设height: 180px或min-height: 180px，再配合object-fit: cover和object-position: center -
.card-body内部没用 flex 布局，标题短、正文少时按钮上浮，看起来“卡在半空”——必须加d-flex flex-column h-100，正文加flex-grow-1，按钮加mt-auto - 别用
text-align: center或line-height强行调垂直居中，会破坏 flex 布局的弹性分配逻辑
响应式换行后还等高吗
会，但仅限同一行内的卡片。换行本身不破坏等高，前提是结构干净、无嵌套干扰。
- 小屏
.col-12时每行 1 张卡，等高无意义，也无需干预 - 中屏
.col-sm-6两列，两张卡同属一个.row，只要.col加了d-flex h-100，就能等高 - 大屏
.col-xl-3四列，四张卡同高——但若每个.col外又套了<div class="d-flex">，.card.h-100就只拉到那层<div>的高度，而非.col的 - 避免用
.card-group或.card-deck：前者在 Bootstrap 5.3+ 已彻底移除，使用会报Unknown pseudo-class selector ".card-group"；后者是 v4 的 table-cell 实现，不支持 flex、grid、响应式换行
真正卡住的往往不是 class 没写对，而是某张卡里悄悄加了一行 margin-bottom: 2rem，或图片忘了 img-fluid，或 .card-body 里塞了个 position: absolute 的徽章——这些细节不处理，再标准的 h-100 + d-flex 组合也会失效。
