col高度不一致是因flex容器的align-items: stretch被内容、margin、padding或min-height干扰；解决方法是显式添加align-items-stretch类，配合d-flex（v4需手动加）、flex-column与flex-grow-1实现可控等高。
为什么 row 里的 col 高度不一致？
Bootstrap 的 row 默认是 display: flex，但它的子元素（col）不会自动拉伸填满整行高度——除非你明确告诉 Flex 容器“让子项在交叉轴上拉伸”。默认情况下，align-items 是 stretch，看似该生效，但实际常被内容、margin、padding 或内部块级元素的 min-height 干扰。
常见现象：col-4 里只有一行文字，col-8 里有三段列表，结果两列高度不同，背景色或边框对不齐。
- 检查是否意外设置了
align-items: flex-start（比如全局重置或父容器影响） -
col内部如果有img、button或未清除的浮动，可能触发 BFC 或改变基线，间接破坏 stretch 行为 - Bootstrap 5+ 的
row默认align-items: stretch，但若子col设了height或min-height，会覆盖 stretch 效果
用 align-items-stretch 确保列等高
Bootstrap 5 内置了响应式对齐工具类，最直接的办法就是显式加 align-items-stretch 到 row 上（虽然它本就是默认值，但显式声明可覆盖潜在干扰）：
<div class="row align-items-stretch"> <div class="col-4">短内容</div> <div class="col-8">长内容……</div> </div>
注意：这个类在所有断点都生效。如需仅在某尺寸下启用（比如只在桌面端等高），改用 align-items-md-stretch、align-items-lg-stretch 等。
- 别用
h-100直接套在col上——它依赖父容器有明确高度，而row通常没有设定height，结果无效 - 如果用了
row-cols-*（如row-cols-3），它只控制列数，不干预高度对齐，仍需配合align-items-* - 在 Bootstrap 4 中该类名是
align-items-center等，但stretch也支持；不过 v4 默认row是display: block，必须先加d-flex才能生效
当内容溢出或最小高度干扰时怎么办？
即使加了 align-items-stretch，如果某列里有 position: absolute 元素、或设了 min-height: 100vh，会导致该列“撑高”整个 row，其他列被动拉伸——这未必是你想要的“视觉等高”，而是布局失控。
此时更可控的做法是：给所有 col 统一加 d-flex flex-column，再用 flex-grow-1 让内容区占满剩余空间：
<div class="row align-items-stretch">
<div class="col-4 d-flex flex-column">
<h3>标题</h3>
<div class="flex-grow-1">正文区域（自适应填满）</div>
<footer class="mt-auto">底部</footer>
</div>
</div>
-
flex-grow-1只对 Flex 子项有效，所以必须先有d-flex - 避免在
col上设height或min-height，否则会和flex-grow冲突 - 如果列内有卡片（
card），记得给卡片也加h-100，否则卡片不会继承父列高度
兼容旧版 Bootstrap 4 的写法差异
Bootstrap 4 的 row 默认不是 Flex，得手动开启：
<div class="row d-flex align-items-stretch"> <div class="col-4">…</div> </div>
漏掉 d-flex 就完全无效。另外，v4 没有 flex-grow-1，得用 flex-grow: 1 自定义类，或靠 h-100 + 父容器高度传递——后者在嵌套深时极易断裂。
- v4 中
align-items-*类需搭配d-flex才生效，单独写没用 - v4 的栅格系统基于
float回退，遇到 Flex 不兼容的老浏览器（如 IE10）时行为不可控，等高基本无法保障 - 升级到 v5 是最省心的解法，前提是项目能接受 breaking change
实际中最容易被忽略的是：等高不是目的，视觉一致性才是。有时候加个统一的 min-height 比硬拉伸更稳定，尤其当内容长度差异大、又不想让空白区域太突兀时。
