不能直接去掉 .row 的左右负边距，因其与 .col 内边距配对构成栅格对齐机制；须用 gx-0 归零水平间隙，否则列会右偏、错位或右侧裁切。
不能直接去掉 .row 的左右负边距——它不是多余样式，而是和 .col 的左右内边距配对工作的核心机制；真要清水平间隙，必须用 gx-0，否则列会偏移、错位、右侧被裁切。
为什么直接写 margin: 0 或 mx-0 会出问题
.row 默认带 margin-left: -0.75rem 和 margin-right: -0.75rem，目的不是“加空白”，而是精确抵消子元素 .col 的 padding-left: 0.75rem 和 padding-right: 0.75rem。手动覆盖只拆了一半协作：
-
mx-0→ 清掉负外边距，但.col的 padding 还在，整行向右偏移0.75rem，右侧内容可能被裁切或触发横向滚动条 -
.row { margin: 0 !important }→ 同样破坏配对，且在响应式断点切换时列宽计算失准，col-md-6可能意外换行 -
p-0加在.row上 → 它的 padding 不参与 gutter 计算，反而干扰内部 flex 对齐，毫无作用还可能引发垂直错位
正确做法：用 gx-0 归零水平间隙
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"> 上加 <li>嵌套后内容贴边异常，优先检查该层 <code>.row是否漏了gx-0，而不是去调外层容器 - 如果嵌套层仍有 1–2px 偏移（尤其在
.col内），可额外加mx-n3（BS5）或mx-n2（BS4）作微调，仅用于视觉补偿 -
px-0加在.container上 → 只清容器自身 padding，不影响内部.row行为 -
px-0加在.col上 → 破坏栅格基线：.row还带着负 margin，列实际可用宽度变小，响应式断点失效 -
no-gutters仅适用于 Bootstrap 4.0–4.6，v5+ 已弃用，强行用可能被忽略或触发警告 - 手写
.row { --bs-gutter-x: 0 }→ 无效，该变量需配合工具类激活，单独设置不触发.colpadding 重置
别用这些替代方案
以下写法要么不参与 gutter 协议，要么已弃用，容易埋坑：
真正关键的是理解：负边距不是 bug，是机制。你改的不是 margin，而是整个栅格的对齐契约。漏掉一层 gx-0，就等于在嵌套结构里少签了一份协议——错位和溢出，都是它迟来的违约通知。
