根本原因是漏掉 .row 导致 .col 的左右 15px 内边距未被 .row 的负外边距抵消；正确做法是每层嵌套都必须显式添加 .row，并用 gx-0 控制间距。
为什么嵌套时 .col 左右多出 15px 偏移
根本原因是跳过了 .row，导致 .col 的 padding-left: 15px 和 padding-right: 15px 没被 .row 的 margin-left: -15px / margin-right: -15px 抵消。结果就是整列向右“撑开”15px，视觉上像内容缩进或右侧溢出。
常见错误写法：<div class="container"><div class="col-8"><div class="col-4">...</div></div></div>——漏掉中间的 .row，浏览器检查元素会看到子 .col-4 真实继承了 15px 左右内边距，但没容器来拉回。
直接给 .col 写 margin-left: -15px 可行吗
不可靠。手动加负外边距只是“表面修正”，它不解决底层布局逻辑断裂问题：
-
.col在嵌套中仍处于非 flex 容器下，width计算可能失准（尤其在小屏断点） - 响应式类如
.col-md-6在md断点切换时，负 margin 不会自动重置，容易错位 - 若父
.col本身有padding或border，叠加负 margin 会导致盒模型混乱，审查元素能看到 layout shift - Bootstrap 5+ 明确将
.row视为布局上下文重置点，绕过它等于放弃框架保障
正确做法：嵌套必须显式加 .row
每一层需要分列的 .col 内部，第一件事就是插入一个 .row。这不是装饰，是功能必需：
<div class="container">
<div class="row">
<div class="col-8">
<!-- 嵌套起点：必须加 .row -->
<div class="row">
<div class="col-4">Card 1</div>
<div class="col-4">Card 2</div>
<div class="col-4">Card 3</div>
</div>
</div>
<div class="col-4">Sidebar</div>
</div>
</div>
这样，内层 .row 的负 margin 才能精准抵消子 .col-4 的 padding，左右间距归零且响应式断点正常生效。
想局部取消间距？用 gx-0，别碰 margin/padding
如果某一层嵌套确实需要无间隙（比如卡片紧贴），直接在对应 .row 上加 gx-0：
-
<div class="row gx-0">...</div>→ 彻底清零水平 gutter，框架内部通过 CSS 变量--bs-gutter-x: 0自动同步调整.colpadding 和.rowmargin - 避免写
.row { margin: 0; }+.col { padding: 0; }，这会破坏垂直方向 gutter（gy）和其他断点行为 -
gx-0是 Bootstrap 5+ 原生支持的语义化工具类，兼容所有响应式前缀（如gx-md-0）
真正容易被忽略的是：嵌套不是“多套一层 class 就行”，而是每层 .row 都在重建栅格基线。漏掉任何一个，后续所有列宽、换行、对齐都可能悄悄失效，而且问题往往只在某个断点下才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
