Bootstrap 5 的 gutter 断点类需在 row 或 flex 容器上显式使用 gx-/gy-/g--, 如 gx-sm-3 表示从 sm 断点起生效，gx-0 gx-md-2 可实现小屏无间距、中屏起有间距，且必须重编译 SCSS 才生效。
Bootstrap 5 的 gutter 断点类怎么用
bootstrap 5 把栅格间距（gutter）完全交给了响应式工具类控制，不再靠 $grid-gutter-width 全局变量一把梭。断点间距不是“设置”，而是“按需选择类名”——你得在容器或行上显式加 gx-* / gy-* / g-*-* 类。
常见错误是直接改 SCSS 变量后发现 HTML 里没生效，或者以为加了 row 就自动有响应式间距，结果小屏还是撑满。
-
gx-0到gx-5控制水平间距，gy-0到gy-5控制垂直间距 - 带断点前缀的如
gx-sm-3表示从sm起生效，gx-md-0表示从md开始取消水平间距 - 不能只写
g-3：这个写法不存在，必须明确是gx-还是gy- - 类作用对象必须是
row或启用了container内部的 flex 容器；普通div加了没用
为什么 gx-md-2 在手机上还有间距
因为 gx-md-2 只在 md 及更大断点生效，小屏（xs）下它不覆盖默认值。而 Bootstrap 默认给 row 设了 gx-2（即 --bs-gutter-x: 0.5rem），所以你看到的其实是 fallback 值。
想让手机无间距、中屏开始有，得显式重置小屏：gx-0 gx-md-2。顺序无关，但后者会覆盖前者。
- 所有
g*-*类最终编译为 CSS 自定义属性，比如gx-3→--bs-gutter-x: 1rem - 如果你用的是 Bootstrap 4，这套类根本不存在，得升级或手动写媒体查询
- 自定义断点时，确保你的
$grid-breakpoints和类生成逻辑匹配，否则gx-xl-4可能压根没被编译出来
如何让某列在特定断点取消左右 margin
栅格列（col-*）本身不带 margin，间距全靠 row 的 gx/gy 驱动。所谓“取消某列间距”，本质是让该列脱离父 row 的 gutter 影响——常见做法是用 mx-0 强制清空左右 margin，但要注意这会破坏 flex 对齐。
- 更稳妥的做法：把需要“破格”的内容单独抽成一个不嵌套在
row里的div，再用ms-n3 me-n3（负边距）对齐原有 gutter 宽度 - 如果用
col内部再包一层px-0，只能去掉内边距，不影响列之间间隙 - 别用
no-gutters：这是 Bootstrap 4 的废弃类，5 里已移除，写了也不生效
自定义 gutter 值要改哪些地方
想新增 gx-6 或把 gx-3 改成 1.25rem，不能只改 SCSS 变量，必须同步调整 $gutters map 和 gutter-classes mixin 的调用位置。
- 核心变量是
$gutters（map），不是$grid-gutter-width；后者只用于初始值推导 - 修改后必须重新编译 CSS，纯 CDN 引入无法生效
- 如果只改 map 但漏了
@include generate-gutter-classes()，新类名不会生成 - 值单位建议保持
rem，避免和container的px宽度混用导致计算偏差
最易被忽略的一点：gutter 是作用于 row 的 padding，而 column 的 width 计算依赖这个 padding。改太大可能让 col-12 溢出容器，尤其在窄屏下——务必在真实设备上测最小宽度场景。
