因为.row默认虽为flex且align-items:stretch，但等高需满足三前提：①两栏必须是.row直接子元素；②.row未设height/max-height/overflow:hidden；③无!important覆盖align-items。
为什么
里两栏高度不一致
因为 Bootstrap 的
默认是
（v4/v5），但“等高”只在满足三个前提时才生效：① 两栏必须是
的**直接子元素**；②
没被设
、
或
；③ 没在任何地方用
覆盖
。
常见错误包括：
把左栏包进
—— 内层
不是外层
的直接子项，
失效
给某列加了
，另一列内容少，结果反而“撑高”了整行，视觉上更不一致
响应式断点里写了
，悄悄关掉了等高
Bootstrap 5 中最简可靠的等高写法
不用额外类、不写 JS，只要结构干净就能稳住：
确保两栏都是
的直接子元素：
避免在列上设
、
或冲突的
如果右栏有背景图且要“贴满高度”，别只靠
—— 加
到该列，并确认其父
没被截断（比如被
包裹）
需要跨断点强等高（如 md/lg 下都拉满视口）？可临时加
到
，但仅限顶层布局，嵌套层级里慎用
Bootstrap 3 怎么补救等高（无 Flex 原生支持）
Bootstrap 3 的
是
+
，原生不支持等高。必须手动注入 Flex 行为，且不能只改
：
原生Bootstrap旋转木马特效
原生Bootstrap旋转木马特效是一款基于jQuery实现的图片轮播切换代码。
下载
给
加自定义类（如
），CSS 设
给每个
加
，CSS 设
（注意不是
，IE10/11 对后者支持差）
务必移除
上的
和旧式
声明，Flex 会忽略它们，但可能引发塌陷
如果列内还有卡片或面板需等高，那该列本身也得是 Flex 容器（再套一层
）
响应式切换后等高失效，怎么排查
大屏正常、中屏错位，八成是媒体查询在捣鬼。重点检查：
是否在
里重写了
或加了
却没配
是否用了
这类组合，导致小屏单列、中屏双列——单列时等高本就不生效，属预期行为；但若中屏仍不等高，说明
所在的
被包裹在非 flex 容器里
是否在某列里用了
或
，脱离文档流后不再参与
计算
真正卡住人的，从来不是“怎么写”，而是嵌套层级和响应式覆盖——调试时先看 computed styles 里的
和
，比猜快得多。
.row.rowdisplay: flex.row.rowheightmax-heightoverflow: hidden!importantalign-items: stretch....row.rowstretchmin-height: 300px@media (max-width: 992px) { .row { align-items: flex-start; } }.row......floatdisplay: inline-blockwidthbackground-size: coverh-100.rowoverflow: hiddenstyle="min-height: 100vh;".row.rowdisplay: blockfloat.row.row.d-flex-rowdisplay: flex !important.col-md-*.flex-itemflex: 1 0 autoflex: 1.col-*float: leftwidthd-flex flex-column@media (max-width: 768px).row { align-items: flex-start; }flex-direction: columnalign-items: stretchcol-sm-12 col-md-6col-md-6.rowposition: absolutetransformstretchalign-itemsdisplay