gx-/gy-类必须加在.row上才生效，仅对有效；加在.col或.form-control等元素上无效，且可能破坏布局；响应式gutter需显式覆盖所有断点，缺一不可。

gx- / gy- 类必须加在 .row 上才生效

所有 gx- 和 gy- 工具类，只对 <div class="row"> 有效。加在 <code>.col、.form-control 或任意其他元素上，CSS 变量 --bs-gutter-x 和 --bs-gutter-y 根本不会被注入，DevTools 里也看不到，列间/行间零变化。

常见错误包括：

• <div class="col gx-md-3"> → 没效果，还可能因未抵消 <code>.row 的负 margin 导致右侧偏移
• <input class="form-control gy-2"> → 完全无效，表单字段堆叠间距仍靠手动 mb- 硬撑
• React-Bootstrap 或 NextUI 封装组件传 className="gx-2"，但没透传到底层原生 <div class="row"> → 类名被吃掉<h3>响应式 gutter 必须显式覆盖所有断点，默认值不会自动清空</h3> <p>Bootstrap 默认给每个 <code>.row 设了 gx-2（即 --bs-gutter-x: 0.5rem）和 gy-2。你只写 gx-md-3，小屏（xs/sm）下依然保留 0.5rem —— 不是“中屏才有”，而是“小屏有默认值、中屏起叠加新值”。

  想实现“小屏无间距、中屏 1rem、大屏 1.5rem”，必须写全：

  • gx-0：清掉所有断点下的水平 gutter（含 xs）
  • gx-md-3：从 md（≥768px）起设为 1rem
  • gx-lg-4：从 lg（≥992px）起升级为 1.5rem（gx-4 ≈ 1.5rem）

  顺序无关，但缺一不可；断点名只能是 xs/sm/md/lg/xl/xxl，g-sx-3 或 gx-small-3 会被忽略。

  别用 mt-/mb-/px- 模拟 gutter，它会破坏布局基线

  gy-2 控制的是相邻 .row 之间的垂直 gutter，基于 flex gap 机制，不改变父容器高度计算，缩放、打印都稳定；而 mb-4 是外边距，作用于单个 .row 元素本身，会撑开父容器，还可能让下一行脱离栅格对齐基线。

  

  VPS Bootstrap

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

  下载

  典型误用场景：

  • 两个卡片 .row 之间需要空隙 → 给上一行加 gy-3，比给下一行加 mt-4 更语义清晰、更可靠
  • 表单字段堆叠时想控制行距 → 用 gy-2 而不是 mb-2，否则 .container-fluid 下容易右侧溢出或出现横向滚动条
  • 手动给 .col 加 px-0 或 ms-3 → 只改了 padding/margin，但 .row 的负 margin 还在，结果是整行左偏、右侧留白、小屏换行错乱

  自定义断点后，gx-/gy- 类不会自动编译出来

  如果你在 SCSS 中新增了断点（例如 $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px, xxxl: 1600px);），光改变量不够，还必须同步调用：

  @include generate-gutter-classes();

  否则 gx-xxxl-3 这类类名根本不会被编译进 CSS，HTML 中写了也无效。Sass 用户推荐直接扩展 $gutters map，比如：

  $gutters: (
    0: 0,
    2: 0.5rem,
    3: 1rem,
    "xxxl": 2rem
  );

  这样编译后会自动生成 .gx-xxxl-3 并设置对应变量 --bs-gutter-x-xxxl。