<p>不能靠自定义 CSS 覆盖 gx- 类，因其依赖高权重选择器（如 .row.gx-3）和 CSS 自定义属性（--bs-gutter-x），普通 .row { --bs-gutter-x: 0 } 权重不足且易被覆盖；gx- 仅对 .row 或 flex 容器生效，加在 .col 上无效，且必须确保 .col 是 .row 的直接子元素，否则负 margin 与 padding 抵消失效；响应式需用 gx-{breakpoint}-{size} 叠加（如 gx-0 gx-md-3 gx-lg-4），漏兜底类则小屏仍用默认值；px-3 等仅改 padding 不配对抵消 margin，会导致整行偏移；真正关键是理解 gutter 是 .row 负 margin 与 .col 正 padding 的严格配对机制，破坏任一环节都会在断点或嵌套中引发布局错乱。</p>
直接在 .row 上用 gx-/gy- 工具类覆盖，比写自定义 css 更可靠；手动改 margin 或 padding 会破坏 flex 配对逻辑，导致列偏移或换行错乱。
为什么不能靠自定义 CSS 覆盖 gx-* 类
Bootstrap 5 的 gx-3 等类是通过高权重选择器（如 .row.gx-3）+ CSS 自定义属性（--bs-gutter-x: 1rem）实现的。你写 .row { --bs-gutter-x: 0 } 权重不够，会被框架规则覆盖。DevTools 里看不到变量生效？大概率是选择器没匹配上，或者类名加错了位置。
-
gx-*只对.row（或 display: flex 容器）生效，加在.col上完全无效 - 检查是否漏了
.row包裹——.col必须是.row的直接子元素，否则负 margin 抵消失效 - React-Bootstrap 等封装组件要确认
className是否透传到原生<div class="row">
响应式间距必须用 gx-{breakpoint}-{size} 叠加
不是“仅在某断点生效”，而是“从该断点起生效，且优先级更高”。漏掉兜底类，小屏仍走默认值。
- 小屏无间隙、中屏起有 1rem、大屏变 1.5rem → 写
gx-0 gx-md-3 gx-lg-4 -
gx-sm-2表示 ≥576px 生效，sm 及以上所有更大断点都用它，除非被gx-lg-4覆盖 - 自定义断点（如新增
xs: 0）后，必须同步调用@include generate-gutter-classes()，否则gx-xs-2压根不会编译进 CSS
别用 px-3 模拟 gx-3
px-3 只加 .col 的左右 padding，不抵消 .row 的负 margin，结果整行向右偏移 15px，布局失衡。
-
gx-3是配对机制：给.row设margin-inline-start: -0.75rem，再给每个.col设padding-inline-start: 0.75rem - 想微调内容呼吸感，可用
px-2作用于.col内部元素，不影响栅格流 - 需要彻底清零水平 gutter，用
gx-0，不是mx-0或px-0
真正难的不是怎么设，而是理解“gutter 是配对机制”——.row 的负 margin 和 .col 的正 padding 必须同时存在、数值一致、只作用于直接父子关系。任何绕过这个结构的写法，短期可能看起来有效，长期必然在某个断点或嵌套层级崩掉。
