必须将 gx-{breakpoint}-{size} 或 gy-{breakpoint}-{size} 类写在 .row 上才生效，加在 .col 或其他元素上无效；响应式需显式覆盖所有断点（如 gx-0 gx-md-3 gx-lg-4），仅写 gx-md-3 不会清除小屏默认值；自定义断点须调用 @include generate-gutter-classes() 才能生成对应类。

必须用 gx-{breakpoint}-{size} 和 gy-{breakpoint}-{size} 类写在 .row 上，缺一不可；只写 gx-md-3 不会清掉小屏默认值，.col 上加任何 gutter 类都无效。

gutter 类只能加在 .row 上，加在 .col 或其他元素上完全没效果

Bootstrap 5 的 gutter 是靠 .row 的负 margin 和其直接子元素 .col 的正 padding 配对实现的。这个机制只响应 .row > .col 结构，且 CSS 自定义变量（如 --bs-gutter-x）只注入到 .row 元素上。

• <div class="row gx-md-3"><div class="col"></div></div> ✅ 正确：变量生效，列间出现对应间距
• <div class="col gx-md-3"></div> ❌ 无效：DevTools 里查不到 --bs-gutter-x，间距无变化
• React-Bootstrap / NextUI 等封装组件，需确认 className 是否透传到了底层原生 <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 ——不是“中屏才有”，而是“小屏有默认值、中屏起叠加新值”。
  

  Bootstrap

  Bootstrap 5.3.8 编译版包含可直接用于项目的 CSS、JavaScript 和插件文件，适合快速搭建响应式网页。

  下载
  • 想实现“小屏无水平间距、中屏 1rem、大屏 1.5rem”：必须写全 gx-0 gx-md-3 gx-lg-4
  • gx-0 是关键兜底：清掉所有断点（含 xs）下的默认水平 gutter
  • 断点名只能是 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 元素本身，会撑开父容器，还可能让下一行脱离栅格对齐基线。

  • 两个卡片 .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);），那么 gx-xxxl-3 这类类名根本不会出现在 CSS 文件里，除非你主动调用：

  @include generate-gutter-classes();

  • 仅改 $grid-breakpoints 不够，必须同步调用该 mixin，否则 HTML 写了也无效
  • 如果用 Sass，推荐在 $gutters map 里扩展断点专属值，例如："xxxl": 2rem（注意引号，Sass 中未引号会被当变量）
  • CDN 用户无法调用 mixin，只能手动写媒体查询覆盖 --bs-gutter-x-xxxl 变量，或避免使用未编译的断点类