align-items-stretch 在 .row 上无效是因为 bootstrap 4 的 .row 默认 display: block，非 flex 容器；需手动加 d-flex 类或升级至 bootstrap 5 并确保 display 未被覆盖。
为什么 align-items-stretch 在 .row 上没反应
因为 Bootstrap 4 的 .row 默认是 display: block，不是 Flex 容器——align-items 是 Flex 专属属性，对块级元素完全无效。即使写了 align-items-stretch，浏览器也会直接忽略。
Bootstrap 5 的 .row 才默认为 display: flex，但前提是没被自定义 CSS 覆盖（比如 style="display: block" 或第三方样式重置）。别猜，直接打开开发者工具看 .row 的 computed display 值。
- Bootstrap 4：必须手动加
d-flex类，或写自定义类如.equal-height-row { display: flex; } - Bootstrap 5：先删掉所有覆盖
display的样式，再确认align-items没被设成flex-start或center - 嵌套结构里，只有
.row的**直接子元素**（即.col-*）才受其align-items控制；子列里的.row需单独处理
align-items-stretch 生效的三个硬条件
就算 .row 是 Flex，align-items-stretch 也不一定拉得动高度。它需要同时满足：
- 父容器（
.row）不能有height或max-height限制——否则子列只能撑到那个上限 - 子列（
.col-*）不能设height、min-height或flex: none，这些会阻止拉伸 - 子列内部不能有
position: absolute元素或margin-bottom: auto，它们会让父列无法正确测量内容高度
常见错觉：“左边空，右边高，但左边没跟着拉高”——往往是因为左边 .col 里有个 position: absolute 的按钮，它脱离文档流，导致该列“报告”的高度为 0。
卡片等高必须加 h-100，但别加错位置
align-items-stretch 只让 .col-* 等高，不等于里面 .card 也等高。因为 .card 是 .col 的子元素，不是 Flex item，它的高度仍由自身内容决定。
所以必须在 .card 上加 h-100，且它的**直接父元素**（通常是 .col）要有可参考的高度——而 .col 的高度又依赖 .row 的 stretch 行为。
- ✅ 正确：
<div class="col-md-6"><div class="card h-100"></div></div> - ❌ 错误：
<div class="col-md-6 h-100"><div class="card"></div></div>（.col没内容时高度为 0，h-100无效）
如果 .col 内还有 .card-body，想让文字和按钮底部对齐，得额外加 d-flex flex-column 和 mt-auto 到按钮上。
响应式断点下等高突然失效？先查媒体查询
在 md 屏幕下正常，切到 sm 就错位，大概率是某处媒体查询悄悄改了对齐方式：
- 检查是否写了类似
@media (max-width: 768px) { .row { align-items: flex-start !important; } }这类覆盖 - 避免在响应式类中混用
flex-column和align-items: stretch——垂直方向的 stretch 需要容器有明确高度，否则无效 - 如果需跨断点强等高，可临时加
style="min-height: 100vh;"到.row，但仅限顶层布局，嵌套层级里慎用
真正卡住人的往往不是 stretch 本身，而是嵌套过深、absolute 元素、或某条不起眼的 !important 覆盖了 align-items。每次失效，优先看 computed styles，而不是改 HTML 结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
