Bootstrap网格嵌套时子行不占满父列宽度，是因为.row默认有±15px外边距，而父.col-未设position: relative或overflow: hidden来截断；必须严格遵循“列→行→列”结构，且父列须为.col-类、子.row须直接子元素于该列。
Bootstrap网格嵌套时为什么子行不占满父列宽度
因为Bootstrap的.row默认有margin-left: -15px和margin-right: -15px，而父列（如.col-md-8）本身没有overflow: hidden或position: relative来截断这个外边距。结果就是子.row向左/右多伸出去15px，视觉上“撑出”父容器。
- 必须在父列上加
position: relative（最稳妥）或overflow: hidden（可能剪裁内容） - Bootstrap 5+已改用
gutter机制，但嵌套时仍需确保父容器能容纳负边距——.row永远需要一个“包裹它的、有明确边界”的父元素 - 别直接把
.row塞进.container以外的任意块级元素里，尤其避免塞进<p></p>或<span></span>这种非容器语义标签中
Bootstrap 4/5嵌套行的标准写法
嵌套不是“在.col里随便放个.row”，而是要严格遵循“列→行→列”三级结构。漏掉任何一级，栅格计算就会错位。
- 父列必须是
.col-*类（不能是.d-flex或.w-100这类模拟列的样式） - 子
.row必须直接子元素于该.col-*，中间不能隔<div>或其他包装 <li>子<code>.row内部的列，宽度按父列总宽100%重新计算（比如父列是.col-md-8，子行里的.col-md-6占的是这8份中的6份，不是全屏12份中的6份）
正确示例：
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">左半</div>
<div class="col-md-6">右半</div>
</div>
</div>
<div class="col-md-4">侧栏</div>
</div>
Bootstrap 5中gutter对嵌套的影响
Bootstrap 5用--bs-gutter-x/--bs-gutter-yCSS变量控制间距，子.row会继承父列的padding上下文，但不会自动重设gutter值。如果你在子行上加了gx-0，它只影响自己，不影响父列的内边距逻辑。
立即学习“前端免费学习笔记（深入）”；
- 子行若需无间隙，用
gx-0+gy-0即可，不用动父列 - 但若父列本身有
px-3这类内边距，会和子.row的负外边距叠加，导致内容实际缩进更多——这时应删掉父列的手动p*类，靠.row自身gutter管理间距 - 响应式gutter（如
gx-md-3）在嵌套中照常生效，但要注意：它作用的是子.row内部列之间的间距，不是子行与父列边缘的距离
调试嵌套布局时最常忽略的两个检查点
90%的嵌套错位问题，都卡在这两处，而不是代码写错了类名。
- 浏览器开发者工具里看父
.col-*元素是否真的“渲染为块级且有宽度”——如果它被display: inline、float: left或flex父容器压缩成0宽，子.row就彻底失去锚点 - 检查是否意外触发了
box-sizing: border-box之外的模型（比如某些重置CSS把html设为box-sizing: content-box），会导致padding计算偏差，让负margin“多偏移”几个像素
嵌套本身不难，难在父容器是否真正“可承载”。很多问题表面是子行没对齐，根子在父列根本没被当容器对待。
