<p>Bootstrap 4 中 .row 默认是 display: block，非 Flex 容器，故 .col- 不会等高；必须显式加 d-flex 类激活 flex 布局并启用 align-items: stretch，且所有 .col- 必须为 .row 的直接子元素。</p>
在 Bootstrap 4 中，.row 默认不是 Flex 容器，所以不加干预时 .col-* 绝对不会等高——必须显式启用 flex 布局，且不能依赖 height: 100% 或 h-100 单独生效。
为什么直接加 .row 类没用？
Bootstrap 4 的 .row 默认是 display: block，子元素 .col-* 是浮动（float）布局，彼此高度完全独立。即使你写了 align-items: stretch，它在非 flex 容器里根本无效。浏览器开发者工具中查看 .row 的 computed display 值，大概率是 block 而非 flex。
- 别信“默认就支持”，BS4 没有默认 flex grid；BS5 才有，但容易被覆盖
- 第三方 CSS、CDN 混用旧版文件、或内联
style="display: block"都会退化行为 -
height: 100%在.col上必然失效：父容器.row没明确高度，100% 就是 0
必须加 d-flex，但别乱加 h-100
d-flex 是唯一轻量、稳定、无副作用的起点：它让 .row 变成 display: flex，并激活默认的 align-items: stretch，所有直接子 .col-* 自动等高。
- 只给
.row加d-flex即可，不需要flex-fill、flex-grow-1或h-100到列上 - 加了
h-100到.col反而可能冲突：如果列已有内容，h-100会尝试覆盖 stretch 行为 - 若列内有
.card，等高的是列容器，不是卡片本身——卡片需单独加h-100 - 避免在
.col上写min-height、height、position: absolute，这些会锁死拉伸
嵌套 .row 是最常踩的坑
Flex 的 align-items: stretch 只作用于**直接子元素**。一旦你在 .col 里再套一层 .row，内层 .row 就脱离了外层的 stretch 链，高度立刻断开。
立即学习“前端免费学习笔记（深入）”；
- 错误结构：
<div class="row"><div class="col"><div class="row"><div class="col"></div></div></div></div> - 正确做法：删掉中间多余的
.row，把内容平级放在同一.row下 - 真要嵌套布局？改用
flex-column+mt-*控制间距，别用嵌套.row - 检查开发者工具里，目标
.col是否确实是.row的直接子节点（而非孙子）
图片、按钮沉底这些“看起来不等高”的真实原因
等高 ≠ 内容视觉对齐。align-items: stretch 只保证容器高度一致，不管内部文字或按钮位置。一列文字少、一列按钮多，短列底部必然留白——这不是等高失败，而是内容布局没处理。
- 按钮沉底不要动
.col，改.card内部：.card加d-flex flex-column h-100，按钮加mt-auto - 图片撑高却不等高？检查是否漏了
max-width: 100%或height: auto，否则某列被单侧撑高但未触发 stretch - 小屏下“错位”？大概率是媒体查询里写了
@media (max-width: 768px) { .row { align-items: flex-start !important; } }，直接关掉了 stretch - IE11 不支持可靠 stretch，若必须兼容，得用 JS 回退（如 matchHeight 库），CSS 方案无法兜底
真正关键的永远是两件事：确认 .row 的 computed display 是 flex，以及确保所有参与等高的 .col 都是它的直接子元素——其余都是干扰项。
