<p>漏掉 .row 是嵌套错位的直接原因，导致子列未换行、右侧溢出或白边；必须每层嵌套都用 .row 重置 flex 上下文，并确保 .col-* 为 .row 的直接子元素。</p>
漏掉 .row 是绝大多数嵌套错位的直接原因，不是样式问题，是布局上下文丢失。
嵌套时子列没换行、堆成一列或右侧溢出
这是最典型的「漏 .row」症状：子 .col-* 直接放在父 .col-* 里，既没 .row 提供 display: flex，也没它的负外边距去抵消父列的 padding。
- 错误结构：
<div class="col-8"><div class="col-4">A</div><div class="col-4">B</div></div> - 正确结构：
<div class="col-8"><div class="row"><div class="col-4">A</div><div class="col-4">B</div></div></div> - Chrome DevTools 中检查子
.col-*的 computedwidth和flex-basis：若显示为auto或远小于预期值，说明它已退出栅格计算流程 - Bootstrap 4 用户注意：
.row必须保持display: flex；若全局禁用了 flex，需显式补上该声明，否则负 margin 失效
嵌套后左右多出白边或内容缩进
白边本质是父 .col-* 的 padding-left: 15px 和 padding-right: 15px 没被子 .row 吃掉——子 .row 默认只抵消自己父容器（即外层 .row）的 gutter，嵌套时得手动加负边距。
- Bootstrap 4：给嵌套的
.row加mx-n2（对应margin-left: -15px; margin-right: -15px） - Bootstrap 5.1+：用
gx-0或更细粒度的gx-md-3 - 别手写
style="margin: 0 -15px"——类名才能保证与$grid-gutter-width同步 - 检查
box-sizing：若祖先节点（如自定义 wrapper）是content-box，负 margin 计算会失准；确保html { box-sizing: border-box }和*::before, *::after { box-sizing: inherit }存在
卡片高度不一导致下一行“被顶起”或错位
这不是 bug，而是 .row 的 align-items: stretch 只作用于本行。高卡片撑高整行后，下一行从它底部开始渲染，视觉上就像断层。
- 单行内对齐：给外层
.row加align-items-center或align-items-start，避免默认拉伸 - 跨行稳定：让每个
.col-*自身成为 flex 容器，例如加d-flex flex-column h-100，再把内容用mt-auto推到底部 - 别给
.col-*设固定height或min-height——这会破坏 Flex 的自然等高逻辑 - 响应式堆叠时（如
.col-12）错位消失，说明问题纯属多列并排的上下文问题，不用动内容本身
表单或自定义标签插在 row/col 中间导致列失效
.col-* 必须是 .row 的**直接子元素**。一旦中间插入 <form>、<section> 或任何非 .col-* 元素，Flex 布局就断了。
- 错误写法：
<div class="row"><form><div class="col-4">...</div></form></div>→.col-4是<form>的子元素，不是.row的 - 正确写法：
<div class="row"><form><div class="col-4">...</div></form></div>不行；应改为<form class="row"><div class="col-4">...</div></form>，或把<form>移到.row外层 - 嵌套超过两层时，每新增一层都必须重置上下文：先加
.row，再确认子列数字之和 ≤ 12，且响应式类（如.col-sm-6）显式声明断点 - 调试时不要依赖肉眼，用 DevTools 查看
.row的display是否为flex，以及.col-*的flex-basis是否按预期计算
嵌套本身没有层数限制，但每一层都必须有 .row 来重置布局上下文；漏掉任意一层，后续所有响应式行为都会逐步失准——这不是样式能修回来的，是结构决定的。
