.row的负边距是Bootstrap栅格对齐核心机制，必须与.col的padding协同抵消以实现视觉顶满容器和列间间隙；删改任一将导致偏移、溢出或响应式错乱。
因为 .row 的负 margin 不是 bug，而是 Bootstrap 栅格对齐机制的核心设计——它必须和 .col 的 padding 配对抵消，才能让内容视觉上“顶满容器”又保持列间间隙。
为什么 .row 一定要有 margin-left: -15px 和 margin-right: -15px
Bootstrap 的 gutter（列间距）不是靠 .col 单独撑出来的，而是靠 .row 和 .col 协同完成的：
- .row 设 margin-left: -15px 和 margin-right: -15px
- 每个子 .col 设 padding-left: 15px 和 padding-right: 15px
两者数值相等、方向相反，最终实现两个效果：
- 列内容左右对齐到 .container 边缘（视觉“顶满”）
- 相邻 .col 之间因各自 padding 形成 30px 水平间隙（即 gutter）
如果删掉 .row 的负 margin，但保留 .col 的 padding，整行就会向右偏移 15px，左侧出现白边；反之，只删 .col 的 padding 而不改 .row，整行就向左偏移 15px，右侧溢出。
直接写 margin: 0 或 !important 覆盖 .row 的负边距会怎样
这不是修复，是破坏。典型后果包括：
- .col 内容不再对齐 .container 左右边缘，缩进或错位
- 响应式断点切换时，列宽计算失准，col-md-6 可能意外换行
- 打印预览或高缩放比下，布局整体偏移
- 嵌套 .row 时，内外层 gutter 机制彻底脱钩，空白加倍
更隐蔽的问题是：某些 UI 库（如 React-Bootstrap）封装了 Row 组件，若你传入 className="mx-0"，它可能被忽略或透传失败——而你还在 DevTools 里反复检查 .row 元素是否真被覆盖了。
gx-0 是怎么安全归零负边距的
gx-0 不是简单地设 margin: 0，而是通过 CSS 自定义属性协同重置整套 gutter 逻辑：
- 在 .row 上设置 --bs-gutter-x: 0
- 所有直系子 .col 的 padding-left 和 padding-right 自动响应这个变量，也变成 0
- 同时，.row 的负外边距也被该变量驱动归零
这意味着：
- 不用担心漏掉某个 .col 或写错选择器
- 响应式写法如 gx-0 gx-md-3 可无缝切换，不同断点下的 gutter 值自动匹配
- 嵌套 .row 也能独立控制，比如外层 gx-3、内层 gx-0，互不干扰
什么时候必须手动加 mx-n* 类
只有一种典型场景：嵌套 .row 出现在 .col 内部时。此时：
- 外层 .col 提供了 padding-left: 15px
- 内层 .row 默认带 margin-left: -15px
两者本该抵消，但因渲染顺序或盒模型计算，常残留 1–2px 空白
解决方法很简单：
- Bootstrap 5：给嵌套的 .row 加 mx-n3（对应 -1rem = -16px）
- Bootstrap 4：用 mx-n2（因 $spacer * .5 = .5rem，n2 = -15px）
- 别用 ml-n3 mr-n3，否则在 xs 断点下可能只生效一边
这个细节容易被忽略——你盯着 .row 的 margin 查了半天，其实问题出在父级 .col 的 padding 和子 .row 的 margin 并没完全对齐，差那 1px 就导致视觉上“多了一圈灰边”。
立即学习“前端免费学习笔记（深入）”；
