根本原因是高度继承链断裂——h-100需父元素有显式高度，而.row和.col默认高度为auto，导致.card继承0；必须让.col同时加d-flex和h-100提供flex上下文与高度基准，.card加h-100并禁用height/min-height，.card-body用d-flex flex-column h-100+flex-grow-1+mt-auto实现内部对齐，且弃用已移除的.card-group。
h-100 不是万能的，加了也不等高，根本原因不是类没写对，而是高度继承链断在了某一层。
为什么 .card 加了 h-100 还不等高？
因为 h-100 表示“继承父元素高度”，而默认情况下：.row 高度为 auto，.col 也由内容撑开——没有可继承的高度来源，h-100 就等于继承了 0。
常见断点：
-
.row没设min-height或没被上层 flex/grid 约束 -
.col外包了额外<div>，该<div>没加h-100，成了继承终点 - 卡片里用了
position: absolute或float的子元素，破坏文档流高度计算 -
.card-img-top没设object-fit: cover或统一min-height，图片加载慢或尺寸差异导致初始高度不一致
.col 必须同时加 d-flex 和 h-100
只加 h-100 不够，.col 必须成为 flex 容器，才能把高度作为“可用空间”传给子项 .card。
-
.col加d-flex h-100：激活 flex 行为 + 提供高度上下文 -
.card加h-100：填满.col的全部高度 -
.row要么靠内容自然撑高，要么显式加style="min-height: 400px"—— 否则.col.h-100仍无高度可继承 - 避免在
.col上写height、min-height、overflow: hidden，这些会中断继承链
卡片内部内容怎么对齐到底部？
外部等高后，标题、正文、按钮仍可能堆顶或悬浮，得靠 .card-body 内部弹性布局接管空间分配。
立即学习“前端免费学习笔记（深入）”；
-
.card-body加d-flex flex-column h-100 -
.card-text加flex-grow-1，吃掉中间空白 - 按钮加
mt-auto（不是align-self-end），更稳定沉底 - 禁止给
.card-body设height或min-height，否则会撑破或截断 - 若含
.card-img-top，建议统一设min-height: 180px，防初始高度为 0 导致拉伸失效
要不要用 CSS Grid 替代 Flex？
如果你不需要支持 IE，display: grid 更简洁，且天然等高，不用层层 h-100。
- 父容器设
display: grid和grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) - 每张
.card直接加height: 100%即可，Grid 自动对齐行高 - 注意：
.row默认不是 grid，得自己覆盖样式，或改用<div class="d-grid"> -
.card-group和.card-deck在 Bootstrap 5.3+ 已彻底移除，继续用会报错Unknown pseudo-class selector ".card-group"
h-100，或者哪张卡片里的图片还没加载完就触发了高度计算。 
