不能靠自定义 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 的严格配对机制，破坏任一环节都会在断点或嵌套中引发布局错乱。

直接在 .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"> <h3>响应式间距必须用 <code>gx-{breakpoint}-{size} 叠加

  不是“仅在某断点生效”，而是“从该断点起生效，且优先级更高”。漏掉兜底类，小屏仍走默认值。

  

  VPS Bootstrap

  从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

  下载
  • 小屏无间隙、中屏起有 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 必须同时存在、数值一致、只作用于直接父子关系。任何绕过这个结构的写法，短期可能看起来有效，长期必然在某个断点或嵌套层级崩掉。