必须使用gx-0而非mx-0或margin:0来清水平间隙，因为.row的负外边距与.col的内边距构成配对抵消机制；gx-0通过--bs-gutter-x:0同步重置二者，确保布局完整、响应式正常。
不能单独去掉 .row 的左右负外边距——它不是“多余样式”，而是和 .col 的左右内边距配对工作的核心机制；真要清水平间隙，必须用 gx-0，否则列会偏移、错位、右侧被裁切。
为什么直接写 margin: 0 或 mx-0 会出问题
Bootstrap 的 .row 默认带 margin-left: -0.75rem 和 margin-right: -0.75rem，目的不是“加空白”，而是精确抵消子元素 .col 的 padding-left: 0.75rem 和 padding-right: 0.75rem。手动覆盖 margin 只拆了一半协作：
-
mx-0→ 清掉负外边距，但.col的 padding 还在，整行向右偏移 0.75rem，右侧内容可能被裁切或触发横向滚动条 -
.row { margin: 0 !important }→ 同样破坏配对，且在响应式断点切换时列宽计算失准，col-md-6可能意外换行 -
p-0加在.row上 → 它的 padding 不参与 gutter 计算，反而干扰内部 flex 对齐，毫无作用还可能引发垂直错位
gx-0 是唯一安全归零水平 gutter 的方式
gx-0 不是简单设 margin: 0，而是通过 CSS 自定义属性 --bs-gutter-x: 0 驱动整套协同逻辑重置：
-
.row的margin-left/margin-right自动归零 - 所有直系子
.col的padding-left/padding-right同步归零 - flex 布局完整性保留，列仍按预期宽度撑满容器
- 支持响应式写法，如
gx-0 gx-md-3：移动端无间隙，≥md 屏恢复默认水平间距
嵌套 .row 时，gx-0 必须加在对应层
常见错误是只在外层 .row 加 gx-0，结果内层卡片仍有缩进。因为每层 .row 独立管理自己的 gutter：
- 侧边栏里主内容区要铺满无间隙 → 在那个内层
<div class="row gx-0">上加 - 嵌套后内容贴边异常，优先检查该层
.row是否漏了gx-0，而不是去调外层容器 - 如果嵌套层仍有 1–2px 偏移（尤其在
.col内），可额外加mx-n3（BS5）或mx-n2（BS4）作微调，仅用于视觉补偿
别用 px-0、no-gutters 或手写 CSS 替代 gx-0
这些写法要么不参与 gutter 协议，要么已弃用，容易埋坑：
-
px-0加在.container上 → 只清容器自身 padding，不影响内部.row行为 -
px-0加在.col上 → 破坏栅格基线：.row还带着负 margin，列实际可用宽度变小，响应式断点失效 -
no-gutters仅适用于 Bootstrap 4.0–4.6，v5+ 已弃用，强行用可能被忽略或触发警告 - 手写
.row { --bs-gutter-x: 0 }→ 无效，该变量需配合工具类激活，单独设置不触发.colpadding 重置
真正麻烦的从来不是怎么删 margin，而是删完之后列还对不齐、断点失效、背景色溢出不对齐——这些全是 gutter 协作被打破的典型症状。关键不是“去掉负边距”，而是“让整套抵消机制归零”。
