bootstrap 5 的网格间距必须通过 gx-/gy- 类或 css 变量 --bs-gutter-x/--bs-gutter-y 控制，直接给 .col 加 padding 或 .row 加 margin 会破坏负边距抵消机制，导致错位。

Bootstrap 5 的网格间距（gutter）不能靠 margin/padding 手动硬调，必须走官方机制——要么用 gx-/gy- 工具类，要么改 CSS 变量 --bs-gutter-x/--bs-gutter-y，否则一定错位。

为什么直接给 .col 加 padding 或给 .row 加 margin 会失败

Bootstrap 5 的栅格对齐依赖「负边距抵消」：.row 有负的 margin-left 和 margin-right，每个 .col 有正的 padding-left 和 padding-right，二者严格配对。手动加 px-3 或 mx-4 只动一边，破坏抵消关系，结果是整行偏移、小屏换行异常、打印时错位。

• 错误示例：<div class="row"><div class="col-6 px-4">A</div></div> → 左右各多出 1.5rem，但 .row 没同步扩大负边距，内容被挤出容器
• 正确前提：所有 gutter 控制必须作用于 .row 元素本身
• React/Vue 封装组件（如 Row）要确认 className 是否透传到原生 <div class="row">，否则类名被吃掉等于没写<h3>用 gx-/gy- 类是最简单且响应式安全的方式</h3> <p>这些类直接注入 CSS 变量 <code>--bs-gutter-x 和 --bs-gutter-y，并适配所有断点，无需额外 JS 或样式。
  

  VPS Bootstrap

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

  下载
  • 必须写在 .row 上：<div class="row gx-3 gy-2"> ✅；<code><div class="col gx-3"> ❌（无效）<li>响应式写法需显式兜底：想实现「xs 无间隙、md 1rem、lg 1.5rem」，得写 <code>gx-0 gx-md-3 gx-lg-4 —— 缺 gx-0，xs 下仍用默认 gx-2（0.5rem）
  • 断点名严格匹配：gx-sm-2 有效，gx-sx-2 或 g-sm-2 被完全忽略
  • 多个断点规则顺序无关，但后声明的会覆盖前一个（比如 gx-md-2 gx-md-3 最终生效的是 gx-md-3）

  运行时动态改 gutter 必须用 --bs-gutter-x 变量

  这是唯一不依赖 Sass 编译、又能局部覆盖的方式，适合主题切换或用户偏好设置。

  • 内联写法：<div class="row" style="--bs-gutter-x: 1.25rem;"> <li>父级注入（影响所有子 .row）：<code><div style="--bs-gutter-x: 0.75rem;"><div class="row">...</div></div>
  • 注意优先级：gx-3 生成的变量会覆盖父级设置；但别在 :root 直接设 --bs-gutter-x，它会压制全部 gx- 类，排查时先看 DevTools 里变量来源
  • 别设为 0 或负值：--bs-gutter-x: 0 会让列紧贴，但某些工具类（如 row-cols-2）内部逻辑可能异常

  想全局统一改 gutter？只能动 Sass 变量 $grid-gutter-width

  如果项目中几十个 .row 都要改成 12px 间距，一个个加 gx-2 不现实，这时必须回退到构建层。

  • 在自定义 SCSS 中，于 @import "bootstrap/scss/bootstrap"; 之前重定义：$grid-gutter-width: 0.75rem;（即 12px）
  • 支持响应式细分：$grid-gutter-width-md: 1rem;、$grid-gutter-width-lg: 1.5rem;
  • 改完必须重新编译整个 Bootstrap，否则 CSS 输出里不会出现新值
  • ⚠️ 容易被忽略：这个改动会影响所有栅格行为，包括 row-cols-*、嵌套 .row，甚至某些组件（如 Card Group）的内部布局

  真正关键的不是“怎么调大”，而是理解 gutter 控制的是「列与列之间」的空隙，不是「内容到列边缘」的距离——后者该调 .col 内部的 px-3 或自定义 padding。