嵌套 .row 导致列间距翻倍的根本原因是父 .col 的 padding 与子 .row 的负 margin 未完全抵消；Bootstrap 5 中需用 mx-n3（或匹配 gutter 的 mx-n*）确保左右同时抵消，避免 ml/mr 单侧失效及自定义样式干扰。
为什么嵌套 .row 会导致列间距翻倍
根本原因是父级 .col 的 padding 和子级 .row 的负 margin 没有完全抵消。Bootstrap 5 的 .row 默认带 margin-left: calc(var(--bs-gutter-x) * -0.5)，而父 .col 默认有 padding-left/right: calc(var(--bs-gutter-x) * 0.5)。两者本该对齐，但若没显式重置，就会残留一半 gutter（比如默认 1.5rem → 剩余 0.75rem），视觉上像“翻倍”或“多出空白”。
必须加 mx-n3（不是 ml-n3 mr-n3）
嵌套时，唯一可靠写法是给子 .row 加 mx-n3（对应默认 --bs-gutter-x: 1.5rem）：
-
mx-n3同时设置margin-left和margin-right为-1rem，能完整抵消父.col的左右padding -
ml-n3 mr-n3在响应式断点下可能只生效一边（如ml-md-n3在 xs 下不触发），导致左右不对称 - 值要匹配当前 gutter：若用了
gx-4，就得用mx-n4；默认没写gx-*就用mx-n3
检查父 .col 是否意外带额外 padding
常见干扰源：
- 自定义 CSS 覆盖了
.col的padding，比如写了.col { padding: 1rem; }→ 破坏原有配对逻辑 - 用了
px-*类（如px-4）在父.col上 → 它会叠加在原生padding上，让抵消更困难 - 父容器是
.container-fluid且没加px-0→ 它自带padding-left/right: var(--bs-gutter-x)，也会参与干扰
别用 no-gutters 或手动清 margin
这些做法在 Bootstrap 5 中已失效或危险：
立即学习“前端免费学习笔记（深入）”；
-
no-gutters是 Bootstrap 4 废弃类，v5 中不存在，写了也无效 - 直接写
.row { margin: 0; }→.col的padding还在，整行内容左偏，右侧可能被截断 - 给
.col加px-0→ 只清了内边距，.row的负边距仍在，结果仍是偏移 - 正确解法永远围绕“配对抵消”：父
padding和子margin必须数值一致、方向相反、同时生效
