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" 或重置类）。所以别猜，先检查 computed styles 看 .row 真实的 display 值。
- Bootstrap 4：必须手动加
d-flex或自定义类（如.equal-height-row { display: flex; }） - Bootstrap 5：优先删掉所有覆盖
display的样式，再加align-items-stretch类（或确认没被设成flex-start） - 嵌套结构里，只有
.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; } } - 小屏单列堆叠时，
.row下只剩一个.col-12，align-items-stretch失去意义，但若你强制设了min-height: 100vh，反而可能造成滚动条异常 - 避免在响应式类中混用
flex-column和align-items-stretch：垂直方向 stretch 需要容器有明确高度，flex-direction: column后，交叉轴变成水平方向，stretch不再控制高度
真正难调的不是写法，而是嵌套层级里某一层漏掉了 d-flex，或者某个自定义 CSS 用 !important 覆盖了 align-items —— 这种问题必须逐层 inspect computed styles，不能靠猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
