.row必须有margin-left: -15px和margin-right: -15px，这是与.col的padding-left/right: 15px构成契约式抵消的基础，确保内容顶满.container边缘且列间保持30px gutter；删改会破坏整个栅格对齐逻辑。
为什么 .row 必须有 margin-left: -15px 和 margin-right: -15px
这不是为了“修复”什么，而是 Bootstrap 栅格对齐机制的起点：.row 的负外边距和 .col 的正内边距（padding-left: 15px / padding-right: 15px）是一对契约式设计，缺一不可。
它的目标就两个：让整行内容视觉上顶满 .container 左右边缘，同时在相邻 .col 之间留出 30px 水平间隙（即 gutter）。如果没有 .row 的负 margin，.col 的 padding 就会层层叠加，首尾列无法贴边，中间列间距也不对。
- 删掉 .row 的负 margin → 整行右偏 15px，左侧出现白边，
.container内容缩进 - 只清掉 .col 的 padding → .row 还在往左拉，结果是整行左偏、右侧溢出，甚至触发水平滚动条
- 用
m-0直接覆盖 .row → 同时干掉了必需的负左右边距，破坏整个抵消链
直接写 margin: 0 或 !important 会怎样
这不是“归零”，是切断抵消逻辑。后果不是局部错位，而是整行栅格系统失准：
-
.col-md-6在中屏下可能意外换行——因为列宽计算依赖原始 gutter 值，而你手动抹掉了它 - 嵌套
.row时，内外层负 margin 和 padding 完全脱钩，空白加倍或相互抵消不足 - 某些封装组件（如
<row></row>from React-Bootstrap）可能忽略你传入的className="mx-0"，但你在 DevTools 里看不到这个 class 被应用，还在反复检查 - 打印预览或高缩放比下，布局整体偏移，且难以复现和调试
gx-0 是怎么安全归零水平间距的
gx-0 不是暴力清 margin，而是通过 CSS 自定义属性驱动整套 gutter 重置：
立即学习“前端免费学习笔记（深入）”；
- 给
.row设置--bs-gutter-x: 0 - 所有直系子
.col的padding-left和padding-right自动响应变为 0 -
.row的负外边距也同步归零
这意味着你不用操心漏掉某个 .col，也不用担心响应式断点切换时行为不一致——gx-md-3 就是 “≥md 屏恢复 1rem 水平间隙”，语义清晰，且嵌套 .row 可独立控制（比如外层 gx-3、内层 gx-0）。
什么时候必须手动加 mx-n* 类
唯一常见且合理的手动负 margin 场景：嵌套 .row 出现在 .col 内部时。
- 外层
.col提供了padding-left: 15px，内层.row默认带margin-left: -15px，理论上应抵消，但盒模型渲染常残留 1–2px 空白 - Bootstrap 5 推荐加
mx-n3（对应margin-left: -1rem/margin-right: -1rem） - Bootstrap 4 对应的是
mx-n2（因默认$spacer: 1rem，但n2 = -0.5rem≈ -15px） - 别用
ml-n3 mr-n3—— 它不支持 RTL，且响应式断点下容易漏掉一边
真正容易被忽略的是：这个负 margin 不是为了“修正错位”，而是补足 Bootstrap 原本为单层容器设计的抵消精度；一旦开始嵌套，就必须显式干预，否则那几像素空白会持续存在。
