Bootstrap 4 的 .row 默认不是 Flex 容器，故 align-items-stretch 无效；需显式添加 display: flex 才能触发等高拉伸，且子列不能设固定高度或 min-height 干扰。
为什么 align-items-stretch 在 Bootstrap 4 的 .row 上没效果？
因为 Bootstrap 4 的 .row 默认不是 Flex 容器——它只是个普通 div，align-items 是 Flex 布局属性，对非 Flex 元素完全无效。即使你手动加了 display: flex，也得确认父容器高度是否“有约束”，否则子项拉伸无从谈起。
真正起作用的是把 .row 设为 display: flex，再配合 align-items: stretch（这是 flex 的默认值，通常可省略），同时确保列内容不主动设置固定高度或 min-height 干扰拉伸。
-
.row必须显式声明display: flex（Bootstrap 4 不自带） - 子列（
.col-*）不能设height或min-height，否则会阻止拉伸 - 如果列内有
margin-bottom: auto或绝对定位元素，也可能破坏等高逻辑
如何用原生 Bootstrap 4 类 + 一行 CSS 实现等高列
不用重写栅格，也不用 JS，只需在 .row 上加一个自定义类，补上 Flex 声明即可：
<div class="row equal-height-row"> <div class="col-md-6">内容短</div> <div class="col-md-6">内容很长……</div> </div>
对应 CSS：
.equal-height-row {
display: flex;
}
就这么一行。Bootstrap 4 的 .col-* 默认是 flex: 0 0 auto，且没有设高度，天然支持拉伸。注意：别加 flex-wrap: wrap（除非你真要换行），否则在小屏下可能意外折行并破坏等高。
遇到内容溢出或底部错位怎么办？
等高 ≠ 内容底部对齐。如果一列文字多、一列按钮少，视觉上还是“不对齐”。这时需要列内部做对齐，而不是依赖 align-items：
- 给每列加
class="d-flex flex-column"，让它自己变成 Flex 容器 - 在需要“钉”到底部的元素上加
mt-auto（等价于margin-top: auto） - 避免在列里用
position: absolute脱离文档流，它会让父列无法正确计算高度
示例：
<div class="col-md-6 d-flex flex-column"> <p>标题和正文</p> <button class="btn btn-primary mt-auto">操作</button> </div>
兼容性与移动端要注意什么？
Flex 布局在 iOS Safari 9+、Android Chrome 4.4+ 都支持，Bootstrap 4 本身已放弃 IE9 及以下，所以没问题。但要注意：
- 单列堆叠时（如
.col-12），display: flex仍生效，但只有一项，等高无意义；无需额外处理 - 使用
.flex-column响应式类（如flex-md-row）时，记得同步调整align-items逻辑——竖排时该用align-content: stretch或靠height: 100%配合 - 如果列里嵌了
iframe或canvas，它们可能触发浏览器渲染 bug，导致高度计算延迟，此时加min-height: 1px到列上常能修复
等高布局真正的难点不在拉伸本身，而在于内容结构是否允许父容器可靠地撑开高度——图片没设 max-width: 100%、文本没限制行数、第三方组件注入不定高 DOM，都可能让 stretch 失效。先稳住内容，再谈对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
