<p>Bootstrap 4 的 .row 默认是 display: block，需加 d-flex 才启用 Flex 布局实现等高；.col-* 必须为直接子元素，.card 需加 h-100 且父容器有高度参考；嵌套 .row 会中断等高链路。</p>
Bootstrap 4 的 .row 默认不是 Flex 容器
Bootstrap 4 的 .row 默认是 display: block，不是 Flex 布局，所以 align-items: stretch 这类属性完全无效。你写再多 align-items-stretch 在 .row 上，浏览器直接忽略——它根本不是 Flex 容器。
必须显式激活 Flex 行为，最简单的方式就是给 .row 加 d-flex 类：
<div class="row d-flex"> <div class="col-6">短内容</div> <div class="col-6">很长很长的内容……</div> </div>
-
d-flex让.row变成display: flex，子元素.col-*自动成为 Flex item - 此时
align-items: stretch（Flex 默认值）生效，列高自动拉齐 - 别在
.col-*上写height、min-height或flex: none，否则会阻断拉伸 - 如果用了
float、position: absolute或margin-bottom: auto，也会让该列“报告”错误高度（比如 0），导致等高失效
卡片（.card）等高要加 h-100，但位置不能错
align-items: stretch 只控制 .col-* 高度，不控制里面 .card 的高度。卡片本身仍是块级元素，高度由内容决定。
要让卡片也等高，必须在 .card 上加 h-100，且它的**直接父元素**（即 .col-*）得能提供可参考的高度：
<div class="row d-flex">
<div class="col-md-4"> <!-- 不在这里加 h-100 -->
<div class="card h-100"> <!-- ✅ 正确：h-100 加在 .card 上 -->
<div class="card-body">
<h5 class="card-title">标题</h5>
<p class="card-text">内容</p>
</div>
</div>
</div>
</div>- 错误写法：
<div class="col-md-4 h-100"><div class="card">…</div></div>——.col没内容时高度为 0，h-100无效 - 如果
.card-body内有按钮想贴底，需额外加d-flex flex-column到.card，再给按钮加mt-auto
嵌套 .row 会断掉等高链路
等高只作用于 .row.d-flex 的**直接子元素**，也就是 .col-*。一旦你在某列里再包一层 <div class="row">，那内层 .row 就脱离了外层的 Flex 上下文，它的子列不再受外层 align-items 控制。
常见现象：“左边空，右边高”，但左边死活不拉高——大概率是左边 .col 里塞了个 .row，导致 stretch 断链。
- 检查结构是否扁平：
.row.d-flex > .col-* > .card是安全路径；.row.d-flex > .col-* > .row > .col-*就不行 - 如果必须嵌套布局，内层
.row也要单独加d-flex，并确保它的父容器（即外层.col）有明确高度（比如加h-100） - 别依赖
card-deck：BS4 已废弃，且用display: table-cell实现，不响应断点、无法混用 Flex/Grid
响应式断点下等高突然失效？先看媒体查询
在 md 屏幕正常，切到 sm 就错位，大概率是某处媒体查询悄悄改了对齐方式：
- 检查是否写了类似
@media (max-width: 768px) { .row { align-items: flex-start; } }—— 这会直接关掉 stretch - 检查是否在小屏下把
.row改成了flex-direction: column，此时align-items控制的是水平对齐，不是高度 - 用浏览器开发者工具直接看
.row在不同断点下的computed display和computed align-items，别猜 - BS4 兼容性注意：IE11 对 Flex 等高支持不完整，
align-items: stretch可能被忽略，需要降级方案（如 JS 测量 + 设置 height）
真正起作用的从来不是某个神奇类名，而是 .row 是否是 Flex 容器、它的子元素是否干净、以及每一层父容器是否提供了可继承的高度参考——这三个条件缺一不可。
