如何达成Bootstrap双栏布局等高效果_使用align-items-stretch的CSS

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，不能靠猜。