Bootstrap 5 的 gutter 间距必须通过作用于 .row 的 gx-/gy- 类设置，加在 .col 上无效；其原理是 .row 负 margin 与 .col 正 padding 配对实现，仅当 .col 是 .row 直接子元素时生效。

Bootstrap 5 的 gutter 间距不能靠改 .col 的 padding 或手动设 .row 的 margin 来调，必须用 gx-/gy- 类作用于 .row 元素，否则会破坏栅格对齐基线，轻则偏移，重则换行错乱。

gutter 类必须加在 .row 上，加在 .col 上完全无效

Bootstrap 5 的列间距是靠 .row 的负 margin（如 margin-left: -1rem）和 .col 的正 padding（如 padding-left: 1rem）配对实现的。这个机制只对 .row 的直接子元素是 .col 时生效。

• A

  B
  ✅ 正确：gx-3 同时调整 .row 的负边距和每个 .col 的左右内边距
• A
  ❌ 无效：DevTools 里根本看不到对应 CSS 变量，--bs-gutter-x 不会被注入
• React-Bootstrap 等封装组件要确认是否把 className 透传到原生
  ，否则类名被吃掉也等于没加

  响应式 gutter 要用 gx-{breakpoint}-{size}，别碰 Sass 变量除非全局重编译

  想“小屏无间隙、中屏 1rem、大屏 1.5rem”，直接写：

  。它会生成带媒体查询的 CSS，并自动设置 --bs-gutter-x: 0、--bs-gutter-x: 1rem、--bs-gutter-x: 1.5rem，优先级高于全局变量。

  • gx-sm-2 表示从 sm 断点（≥576px）起生效；gx-md-0 表示从 md（≥768px）起取消水平 gutter
  • 如果自定义了断点（比如新增 xs: 0, sm: 480px），必须同步调用 @include generate-gutter-classes()，否则 gx-xs-2 这类类名压根不会被编译出来
  • 改 $grid-gutter-width 是全局行为，需重新编译整个 Bootstrap，适合统一设计规范，不适合局部微调

  取消 gutter 别用 no-gutters，真正有效的只有 g-0、gx-0、gy-0

  no-gutters 是 Bootstrap 4 的废弃类，5 里已彻底移除。写了也不报错，但浏览器找不到对应样式，毫无作用。

  

  VPS Bootstrap

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

  下载

  • g-0：同时清水平 + 垂直 gutter
  • gx-0：仅清水平 gutter（列之间无空隙）
  • gy-0：仅清垂直 gutter（多行之间贴紧）
  • 错误示范：
    → 视觉上毫无变化，.row 仍带负 margin，.col 仍有 padding

    精细控制两列间特殊间距？别硬调 .col 的 padding 或 margin

    给单个 .col 加 px-0 或 ms-3 会打破 .row 和 .col 的 gutter 协同机制，导致小屏下宽度超限、换行失效、内容左偏或右侧留白。

    • 想让两列之间空得更多？用更大的 gx- 值，比如 gx-4（1.5rem）
    • 想只对某一对列加额外空隙？更稳妥的是在列内部加空白，或用 ms-auto/me-auto 推挤
    • 需要像素级控制？考虑放弃栅格，改用 display: grid + gap，语义更清晰、控制更自由

    最容易被忽略的一点：所有 gutter 类都依赖 --bs-gutter-x 和 --bs-gutter-y 这两个 CSS 自定义属性生效，而它们只在 .row 元素上被声明。一旦你用 !important 覆盖了这些变量，或者用 JS 动态删了 gx- 类却忘了清理对应变量，布局就会静默失准——DevTools 里看不出明显报错，但列就是不对齐。