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"> → 列无变化，但右侧可能意外偏移（因 <code>.row的负 margin 没被抵消）- 用
px-0或ms-2手动调.col边距 → 只改了 padding，没动.row的负 margin，结果整行向右偏移 1rem - 在 React-Bootstrap 等封装组件里传
className="gx-0"，但实际没透传到原生<div class="row">，类名被吃掉了<h3>嵌套 .row 时，外层 gx-0 不会继承给内层</h3> <p>如果你在某个 <code>.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 变量的实际存在。漏掉任意一环，间隙就“看起来没清零”。 -
