嵌套后子列宽度算不准、右侧溢出的直接原因是漏掉 .row，导致其 margin: 0 -15px 无法抵消父 .col-* 的 padding: 0 15px，负边距失效而撑破容器。
为什么嵌套后子列宽度算不准、右侧溢出
直接原因是 .row 的 margin: 0 -15px 没被父级 .col-* 的 padding: 0 15px 正确抵消——漏掉一层 .row，负边距就失去作用对象，内容自然撑破容器。
常见错误现象：overflow-x: auto 出现滚动条、卡片右侧被截断、响应式断点下布局突然错位。
- 必须确保每层嵌套都以
.row开头，且.row只能放在.col-*内部（不能塞进另一个.row） - 父级
.col-*不可省略——哪怕你只是想“视觉居中”，跳过它，子.row就会脱离栅格上下文 -
.col-6是占其**直接父级.row宽度的 50%**，不是整页宽度的 50%；嵌套越深，这个“相对基准”越小
子列不换行、堆成一列或高度不齐
根本问题：子 .col-* 没被包在 .row 里，导致 Bootstrap 的 flex 布局失效，它们退化为普通块级元素，各自独占一行。
错误写法：<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>
-
.row不是装饰，是功能开关：它提供display: flex和负边距，缺一则子列无法参与栅格计算 - 同一
.row下所有.col-*的数字加起来应 ≤ 12；超了会自动换行，但不是“智能重排”，而是硬切到下一行 - 卡片高度不一致时，仅给外层
.row加d-flex不够，得让每个子.col-*也变成 flex 容器（如加d-flex flex-column h-100）
嵌套超过两层时怎么避免失控
三层及以上嵌套本身可行，但容易因“心算占比”和“断点混搭”翻车。重点不是层数，而是每一层是否重置了布局上下文。
- 每新增一层，第一件事就是加
.row，第二件事是检查子列总宽是否为 12（比如.col-6里放两个.col-6，合法；放三个.col-4，也合法；但放.col-5 .col-5 .col-5就会错位） - 响应式类必须显式声明断点：
.col-4在所有尺寸都占 1/3，.col-sm-6 .col-md-4才能在不同设备上合理切换列数 - 用
g-0关闭深层.row的 gap，改用mb-2、pe-3等工具类控制单边距，避免多层gap叠加导致间距爆炸 - 调试时别信肉眼判断，用 Chrome DevTools 查看
flex-basis和computed width，这才是真实渲染值
什么时候该放弃嵌套，换别的方案
当出现以下任一情况，硬套栅格嵌套已不是最优解：
- 需要跨列对齐（比如左侧三列 + 右侧一个横跨三列的 banner）
- 同一区域内列宽完全不对称（如 20% / 60% / 20%，而非 4/12 或 6/12）
- 响应式重排逻辑复杂（比如桌面端 3 列、平板端 2 列、手机端 1 列，但中间某列要始终居中）
- 动态内容导致列数不确定，且需严格等高+无缝换行
这时更可控的做法是：用 flex 工具类（如 d-flex flex-wrap + flex-grow-1）配合 min-width 控制，或直接写 CSS Grid（Bootstrap 5.3+ 已支持 grid 工具类）。嵌套不是万能钥匙，.row 是开关，但不是所有门都靠它开。
