根本原因是.row的align-items: stretch仅使本行.col等高，下一行从该行底部开始渲染，导致视觉错位；嵌套时漏写.row会丢失flex布局和负外边距抵消机制。
bootstrap 栅格中，.col 内容高度不一致时，下一行会“被顶起”或“塌陷”，这不是 bug，是 flex 布局的默认行为——.row 的 align-items: stretch 让所有列拉伸到最高子项高度，但仅限本行；跨行之间无约束。解决的关键不是压平高度，而是控制对齐上下文。
为什么 .row 里多个 .col 高度不同会导致下一行错位
根本原因是：Flex 容器（即 .row）只保证本行内列等高，不干预下一行的起始位置。当某列内容特别高（比如长文本、图片、卡片），它会把整行撑高，而下一行的 .row 仍从该高度底部开始渲染——如果没加 clear 或没重置上下文，视觉上就像“断层”或“右移”。尤其在嵌套或浮动回退场景（如 Bootstrap 3 或禁用 flex）中更明显。
-
.col-4里放一张图 + 三行文字，高度 320px；相邻.col-4只有一行字，高度 60px → 整行按 320px 渲染 - 下一行的
.row默认紧贴其后，但若父容器没设overflow: hidden或清除浮动，可能因 margin 折叠或 float 残留导致偏移 - 移动端堆叠时（
col-12），错位消失——说明问题出在多列并排的 Flex 行上下文，而非内容本身
给 .col 加 h-100 不起作用？检查父级高度来源
h-100 是相对高度，依赖父元素有明确高度值。直接给 .col 加 h-100 失效，往往因为：.row 高度由内容撑开，没有“100%”可参照；或者 .container / .row 被设了 min-height: auto（默认值）。
- ✅ 正确做法：在
.row上加min-height: 200px（数值按业务卡片最小预期定），再给子.col加h-100 d-flex flex-column - ⚠️ 错误写法：
height: 100%在.col上——它不会继承.row的计算高度，Flex 子项不响应百分比 height - ? 更稳妥：用
d-flex flex-column包裹卡片内容，再对正文区加flex-grow-1，让文字区域自动填满剩余空间
卡片高度不一致，但不想固定 min-height 怎么办
硬设 min-height 容易在文字极少时留白过多，或在超长内容时溢出。动态适配更灵活，但优先推荐 CSS 方案，避免 JS 干预布局流。
- 用
.card { height: 100% }+.card-body { flex-grow: 1 }，前提是父.col有d-flex flex-column h-100 - 避免
card-deck：Bootstrap 5.3+ 已废弃，且它只是简单设display: flex; flex-wrap: wrap，不解决跨行等高 - 如果必须 JS 补齐，监听
resize和 DOM 插入，用getBoundingClientRect().height找出每行最大高度，再统一设给该行所有.col——但注意：这会触发重排，慎用于列表滚动场景
嵌套时子 .col 错位，90% 是漏写了 .row
在 .col-8 里直接放三个 .col-4，浏览器会渲染错乱：右侧溢出、换行失效、高度不齐。这不是响应式断点问题，是栅格上下文丢失。
- ❌ 错误结构：
<div class="col-8"> <div class="col-4">...</div> <div class="col-4">...</div> </div> - ✅ 正确结构：
<div class="col-8"><div class="row"><div class="col-4">...</div></div></div> -
.row不是装饰，它提供margin: 0 -15px抵消.col的padding: 0 15px，同时激活 Flex 布局——缺一不可 - Bootstrap 4/5 中若项目全局禁用了 flex（如通过 Sass 变量
$enable-flex设为 false），.row会回退到 float，此时必须手动加clearfix，否则错位更隐蔽
最常被忽略的一点：每一层 .row 都在重置布局上下文。嵌套越深，漏掉某一层 .row 的代价越大——它不会报错，但会让后续所有栅格行为脱离预期。检查工具栏里看子 .col 是否意外带上了左右 15px 内边距，基本就能定位问题所在。
