嵌套 .row 出现双倍 gutter 是因外层 .col 的 padding 与内层 .row 的负 margin 在嵌套时未完全抵消；应使用匹配的响应式 mx-n* 类（如 gx-3 对应 mx-n3）作用于嵌套 .row 上修复。
嵌套 .row 为什么会出现双倍 gutter？
因为外层 .col 自带 padding-left/padding-right（比如 1rem），而内层 .row 又自带负的 margin-left/margin-right（同样 -1rem）——两者本该抵消，但嵌套后，内层 .row 的负边距作用在父 .col 的 padding 区域内，导致视觉上“撑开”，看起来像多了一层水平间距。
怎么用 mx-n* 修复嵌套 gutter？
Bootstrap 5 提供了响应式负边距工具类，直接加在嵌套的 .row 上即可对齐：
-
mx-n3对应margin-left: -1rem; margin-right: -1rem，刚好抵消默认gx-3的水平 gutter - 必须加在嵌套的
<div class="row"> 上，不是父 <code>.col，也不是子.col - 别用
ml-n3 mr-n3：响应式断点切换时可能只生效一边，mx-n*更稳妥 - 如果外层用了
gx-4（即--bs-gutter-x: 1.5rem），那就用mx-n4，值要匹配
示例：
<div class="col-8"><br> <div class="row mx-n3"><br> <div class="col-6">A</div><br> <div class="col-6">B</div><br> </div><br></div>
响应式嵌套 gutter 怎么写才不翻车？
嵌套本身不支持原生响应式 gutter 类（比如 gx-md-3 不会自动适配嵌套层级），所以得手动配平：
- 如果外层是
gx-0 gx-lg-3，那嵌套.row就得写mx-n0 mx-lg-n3 - 别指望一个
mx-n3能覆盖所有断点；不同断点下 gutter 值变了，负边距也得跟着变 - DevTools 里重点看
computed中的margin-left和padding-left是否成对抵消（比如都是1rem/-1rem） - 若嵌套过深（比如三层
.row），建议改用display: grid+gap替代，更可控
为什么 px-* 类在嵌套里不管用？
px-0、px-3 这类工具类只改 padding，但嵌套 gutter 失衡的根因是 margin 和 padding 的协同错位。单清 padding 不动 margin，等于只拆了一半齿轮：
- 给嵌套
.row加px-0→ 只清了左右padding，它的负margin还在，整行继续左偏 - 给子
.col加mx-0→ 它本来就没margin，纯属无效操作 - 真正要动的是嵌套
.row的margin，所以必须用mx-n* - 硬写
style="margin: 0 -15px"也不推荐：单位固定为px，会绕过 Bootstrap 的rem响应式缩放逻辑
最易被忽略的一点：嵌套前先确认父 .col 宽度是否足够容纳子列总和（如 col-6 col-6 在 col-8 里就超了），否则加再准的 mx-n* 都会触发 flex 换行或溢出。
