gx-0 必须加在 .row 上才生效，直接加在 .col 上无效；它通过设置 CSS 变量 --bs-gutter-x 触发负 margin 与正 padding 的配对机制；常见错误包括错加位置、用废弃类 no-gutters 或 px-0 替代、未为嵌套 .row 显式添加 gx-0，以及响应式断点声明不完整。
gx-0 必须加在 .row 上才生效
直接给 .col 加 gx-0 或任何 gx-* 类完全无效——它只作用于 .row 元素，靠设置 CSS 变量 --bs-gutter-x 触发框架内部的负 margin / 正 padding 配对机制。DevTools 里搜不到这个变量，说明类没起作用。
常见错误包括：
-
<div class="col-6 gx-0">→ 列无变化，但右侧可能意外偏移（因.row的负 margin 没被抵消） - 用
px-0或ms-2手动调.col边距 → 只改了 padding，没动.row的负 margin，结果整行向右偏移 1rem - 在 React-Bootstrap 等封装组件里传
className="gx-0"，但实际没透传到原生<div class="row">，类名被吃掉了
嵌套 .row 时，外层 gx-0 不会继承给内层
如果你在某个 .col 里又放了一个 .row，外层的 gx-0 对它毫无影响。内层 .row 仍按默认 gutter（--bs-gutter-x: 0.5rem）渲染，列之间仍有间隙。
必须显式给内层 .row 单独加 gx-0：
<div class="row gx-0">
<div class="col-6">A</div>
<div class="col-6">
<!-- 内层 row 必须自己加 gx-0 -->
<div class="row gx-0">
<div class="col-6">B1</div>
<div class="col-6">B2</div>
</div>
</div>
</div>别用 no-gutters 或 px-0 替代 gx-0
no-gutters 是 Bootstrap 4 的废弃类，v5 中已彻底移除，写了也不报错，但浏览器找不到对应样式，毫无作用。
px-0 看似“清除了左右内边距”，但只改了 .col 的 padding，没动 .row 的负 margin，结果是容器左右各多出 15px 白边，响应式断点下更易错位。
真正安全的做法只有：
-
gx-0：仅清水平 gutter（列之间无空隙） -
gy-0：仅清垂直 gutter（多行之间贴紧） -
g-0：同时清水平 + 垂直 gutter
响应式场景下，gx-0 要配合断点类一起用
想实现“小屏无间隙、中屏起恢复 1rem”，不能只写 gx-md-3。因为 Bootstrap 默认在 xs 断点仍生效 gx-2（即 --bs-gutter-x: 0.5rem），必须显式清空：
-
gx-0：清掉所有断点下的默认水平 gutter（包括 xs） -
gx-md-3：从 md（≥768px）起设为 1rem -
gx-lg-4：从 lg（≥992px）起覆盖为 1.5rem
顺序无关，但缺一不可；断点名必须严格用 xs/sm/md/lg/xl/xxl，写成 gx-sx-2 或 g-small-3 会被忽略。
真正容易被忽略的是：gutter 类的生效依赖三重耦合——正确的元素层级（.row 直接子元素必须是 .col）、完整的响应式声明链、以及底层 CSS 变量的实际存在。漏掉任意一环，间隙就“看起来没清零”。
