必须给 .col 同时加 d-flex 和 h-100，使其成为有明确高度的 flex 容器，才能让子级 .card 正确继承并拉满高度；.card 和 .card-body 也需均加 h-100，再配合 d-flex flex-column 等内部布局实现等高与底部对齐。
直接加 h-100 不管用，是因为 Bootstrap 4 的 .col 默认没高度，h-100 继承的是 0 —— 必须让 .col 自己先成为 flex 容器并获得可继承的高度基准。
为什么 h-100 单独加在 .card 上无效
根本原因不是类名写错，而是高度继承链断在了 .col 这一级：.col 是 .row 的 flex item，但它本身不是 flex 容器，也没有显式高度；.card 的 h-100 只能继承父级（即 .col）的计算高度，而这个高度往往等于内容撑开的高度（可能只有 2em）。
-
.col上没设d-flex→ 内部.card无法被拉伸 -
.col被设了min-height或overflow: hidden→ 截断 height 继承 -
.card-body里写了height: 200px或min-height: 100%→ 覆盖h-100效果 - 图片异步加载完成前，
.card初始高度为 0 →h-100拉的也是 0
.col 必须同时加 d-flex 和 h-100
这是最关键的一步：只有 .col 变成 flex 容器，它才能把自身“可分配高度”作为基准传给子项；而 h-100 让它继承自 .row（或更高层）的高度，否则它还是由内容撑开。
-
.row默认是display: flex，但它的align-items: stretch只作用于直接子项（即.col），不向下穿透 -
.col加d-flex h-100后，才具备两个条件：① 是 flex 容器；② 有明确高度可供.card继承 - 若
.row高度也不稳定（比如内容太短），可在其上加style="min-height: 300px"或依赖内容自然撑高 - 避免在
.col上写height、flex: none、overflow: hidden—— 这些都会中断 stretch 行为
.card 内部内容对齐到底部的可靠写法
即使外部等高了，文字少的卡片里按钮仍会浮在中间。这不是 margin 能解决的，得靠内部 flex-column 主动分配空间。
-
.card和.card-body都必须加h-100—— 缺一不可，否则内部 flex 无高度参考 -
.card-body加d-flex flex-column h-100，让它成为纵向弹性容器 - 正文区域（如
.card-text）加flex-grow-1，自动吃掉中间空白 - 按钮加
mt-auto（不是align-self-end），它比后者更稳定，不受行数影响 - 如果卡片含
.card-img-top，建议统一设height: 180px或min-height: 180px，防止图片加载慢导致布局跳动
IE11 兼容时的降级处理要点
现代 flex 写法在 IE11 里会失效或表现异常，不能简单套用 flex: 1 1 auto 或 gap。
- 放弃
flex-wrap和gap，改用margin控制间距，并手动处理折行 - 用
display: -ms-flexbox替代display: flex，子项用-ms-flex: 1 - 避免在卡片上设
min-height—— IE11 对 flex 子项的min-height解析不稳定 - 不依赖
flex-basis: auto，IE11 不识别；改用flex: 1（等价于flex: 1 1 0%），接受内容少时轻微压缩 - 最稳妥方案：用
@supports (display: flex)包裹 flex 相关样式，IE11 下直接 fallback 到原始流式布局
真正卡住等高效果的，从来不是语法写错，而是高度基准没立住 —— .col 没 d-flex，.card 就永远拉不满；.card-body 没 h-100，内部 flex 就没空间可分。这些环节缺一不可，且顺序不能颠倒。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
