bootstrap 4+ 的 .row 默认等高，因 align-items: stretch 已启用；不等高主因是该属性被覆盖（如设为 flex-start）、列内 height: 100% 失效、absolute 元素脱离流或嵌套过深导致 stretch 未传递。
Bootstrap 4+ 默认栅格已基于 Flexbox，col 项天然等高，无需额外 hack；但若列内内容高度不一、又没触发 stretch（比如设置了 align-items: flex-start），就会失高——问题不在栅格本身，而在父容器的 Flex 对齐配置。
为什么 Bootstrap 的 row 里 col 有时不等高
根本原因是 row 是 display: flex 容器，但它的 align-items 默认值是 stretch，理论上应拉齐。常见破环场景包括：
- 手动给
row设置了align-items: flex-start或center -
col内部用了height: 100%但父级没设高度（Flex 子项的百分比高度需显式触发） - 列中存在
position: absolute元素，脱离文档流导致高度计算失效 - 使用了
flex: 0 0 auto类（如flex-fill冲突）或覆盖了flex-basis
如何确认并修复 row 的 align-items
直接检查浏览器开发者工具中 .row 元素的 computed align-items 值。若不是 stretch，就该修正：
- 移除自定义 CSS 中对
.row的align-items覆盖 - 若必须局部调整（比如某行要顶部对齐），改用
align-items-start等 Bootstrap 工具类，并接受该行不再等高 - 避免在
row上写style="align-items: ..."—— 这会覆盖默认行为且难追溯 - 检查是否引入了第三方 CSS（如某些 UI 组件库）全局重置了
align-items
当需要“视觉等高”但内容区域不占满时怎么办
Stretch 确保子项拉伸到最大高度，但若列内内容短，底部留白可能不美观。此时不应禁用 stretch，而应让内容“撑开”或“锚定”：
- 给
col加h-100（Bootstrap 5）或height: 100%+ 父row有明确高度（慎用，易引发循环依赖） - 在列内用
d-flex flex-column，再给主体内容加flex-grow-1，让按钮/文字自动撑到底部 - 避免给
col设min-height—— 它不参与 Flex 高度分配逻辑，仅作底线约束 - 若用卡片（
.card），确保卡片本身设h-100，否则卡片高度由内容决定，无法拉齐
兼容性与性能注意点
Stretch 行为在所有现代浏览器（Chrome 29+, Firefox 20+, Safari 9+, Edge 12+）中稳定支持，但要注意：
- IE11 对
align-items: stretch支持有 bug，尤其嵌套 Flex 容器下；若需支持 IE11，改用align-items: flex-start+ JS 计算最高列并统一设高（不推荐） - 过度嵌套 Flex（如
row > col > d-flex > d-flex）可能让 stretch 传播失效，建议单层 Flex 控制高度，内部用 margin/padding 调整间距 - 不要用
!important强制align-items: stretch—— 它掩盖了真正的问题源头（比如样式优先级冲突）
最常被忽略的是：等高只发生在同一 row 下的直接子 col 之间；跨 row、或 col 套 col，stretch 就不跨级生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
