Bootstrap三层嵌套必须每层都带.row，漏掉则子列退化为普通div导致布局错乱；子列总宽须严格等于12；断点类不继承父级需显式声明；三层以上优先用CSS Grid替代。
三层嵌套必须每层都带 .row
漏掉任意一层 .row，子列就退化为普通 <div>，宽度算不准、右侧溢出、换行错乱全都会出现。Bootstrap 的栅格逻辑只认 .row 的直接子元素是列——跳过它，等于关掉了 flex 布局和负边距抵消机制。
常见错误写法：<div class="col-6"><div class="col-4">A</div></div>（缺 .row）
正确写法：<div class="col-6"><div class="row"><div class="col-4">A</div></div></div>
三层结构示例：<div class="container"><div class="row"><div class="col-8"><div class="row"><div class="col-6"><div class="row"><div class="col-4">X</div><div class="col-4">Y</div></div></div></div></div></div></div>
子列总宽必须严格等于 12，不能“差不多”
Bootstrap 不做加法校验，只按数字算 flex-basis。同一 .row 下所有 .col-* 的数值加起来超 12，超出部分硬换行；不足 12，则留白——不是缩放，是布局断裂。
-
.col-5 + .col-5 + .col-3= 13 → 第三个列一定掉到下一行 -
.col-4 × 3= 12 → 正常三列并排 - 动态列数不确定时，改用
row-cols-3类，交由 CSS Grid 自动均分
断点类必须显式声明，不继承父级
.col-md-6 在手机上默认回退为 .col-12，不会因为父容器是 .col-lg-8 就自动在小屏也保持 6 列宽。嵌套越深，断点越容易失效，靠“猜”不如靠写死。
错误写法：<div class="col-lg-8"><div class="row"><div class="col-md-6">内容</div></div></div>（小屏下变成单列，但没声明 .col-6）
正确写法：<div class="col-lg-8"><div class="row"><div class="col-6 col-md-6 col-lg-6">内容</div></div></div> 或更简洁地用 .col-6（它在所有尺寸都生效）
三层以上优先用 CSS Grid 替代
不是不能嵌套三层，而是心算占比 + 断点混搭 + 多层 g- 间距叠加，会让调试成本陡增。一旦出现跨列对齐、非 12 约数列宽（如 5 列）、或高度强同步需求，硬套栅格嵌套已不是最优解。
推荐方案：
– 启用 Bootstrap 5.2+ 的 CSS Grid 支持（需设 $enable-cssgrid: true 并重编译）
– 或直接用原生 display: grid，比如 grid-template-columns: repeat(5, 1fr) 实现等宽五列
– 混用 .row 和 .grid 会冲突，二者选其一
.row 都在重置布局上下文——漏一个，整个链路就脱钩。别信肉眼判断，Chrome DevTools 里看 flex-basis 和 computed width 才是真实值。 
