bootstrap 4 实现等高列的最优解是给 .row 加 d-flex 类，因其将容器转为 flex 布局并默认启用 align-items: stretch，使 .col-* 直接子元素天然等高，无需额外 css、flex-fill 或 h-100。
Bootstrap 4 中实现等高列，**最优解就是给 .row 加 d-flex 类，不写额外 CSS，也不用 flex-fill 或 h-100 —— 除非你有特殊对齐需求。** 这是唯一既轻量、又稳定、还兼容所有断点的做法。
为什么 d-flex 是必须且足够的
.row 在 Bootstrap 4 默认是 display: block，align-items: stretch 完全无效；加了 d-flex 后它变成 display: flex，子元素 .col-* 天然继承 align-items: stretch（Flex 默认行为），无需再声明。
- 别手动写
display: flex——d-flex是 Bootstrap 4 内置工具类，已做浏览器前缀处理 - 不要在
.row上加flex-wrap: wrap（除非真要换行），否则小屏下可能意外折行并破坏等高 - 如果用了第三方 UI 库或自定义 CSS，检查开发者工具中
.row的 computeddisplay值，确认没被覆盖回block
哪些样式会直接破坏等高效果
即使 .row 是 Flex 容器，只要列内存在以下任意一项，.col-* 就无法正确拉伸：
-
height或min-height：硬编码高度会锁死拉伸行为 -
position: absolute：脱离文档流，父列无法测量其高度，该列“报告”的高度可能为 0 -
margin-bottom: auto：常用于底部锚定，但会干扰 Flex 高度计算逻辑 - 嵌套的
.row：只有.row的**直接子元素**参与align-items: stretch，内部再套一层.row就断链了
内容短、按钮沉底时怎么视觉对齐
等高 ≠ 内容底部对齐。align-items: stretch 只保证容器高度一致，不控制内部元素位置。若一列文字少、一列按钮多，短列底部会留白——这时要靠列内部的 Flex 布局，而不是改列本身：
- 给
.col-*加d-flex flex-column，让它自己成为 Flex 容器 - 把需要“钉”到底部的元素（如按钮）加上
mt-auto（等价于margin-top: auto） - 避免给
.col-*加h-100：若列无内容，h-100无效；若已有内容，反而可能和 Flex 拉伸冲突 - 卡片（
.card）要等高？必须给.card本身加h-100，而不是给.col-*加
响应式断点下突然失效的排查重点
常见错觉是“大屏正常、小屏错位”，其实问题不在断点本身，而在媒体查询里悄悄覆盖了关键属性：
- 检查是否写了类似
@media (max-width: 768px) { .row { align-items: flex-start !important; } }—— 这会让该断点下所有.row主动放弃等高 - 图片未设
max-width: 100%或height: auto，可能单侧撑高却不触发拉伸，造成“伪不等高” - Bootstrap 4 不支持 IE9 及以下，但若项目仍需兼容 IE11，请注意它对嵌套 Flex 的
align-items: stretch有 bug，此时应避免多层 Flex 嵌套
真正容易被忽略的是：等高只作用于同一 .row 下的直接子列，且依赖整个高度链干净——从 .row 的 display，到 .col-* 的无干扰样式，再到列内每个子元素的定位与尺寸，任一环节卡住，都会让 stretch 行为静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
