Bootstrap 5 中需用“g-0 g-md-3”组合实现仅在md断点设置gutter值，即先清空所有断点间距再单独激活md断点，不可单靠g-md-3；修改$grid-gutter-width会影响所有断点，精准控制须用CSS自定义属性或覆盖工具类。
Bootstrap 5 如何在特定断点设置 gutter 值
Bootstrap 5 的 gutter 不是全局统一配置，而是通过响应式间距工具类（如 gx-*、gy-*、g-*）按断点单独控制。直接修改 CSS 变量或重写类名才能实现“仅在某断点生效”的效果。
-
g-3表示所有断点都用1rem（默认$spacer * .75），不区分屏幕尺寸 - 要只在
md断点设gutter，得组合使用：比如g-md-4表示md及以上才启用1.5rem水平+垂直间距 - 若需“仅
md有间距，其他断点无”，必须搭配g-0先清空默认，再用g-md-3单独开启——g-0 g-md-3 - 注意：Bootstrap 5 的断点前缀（
sm/md/lg/xl/xxl）必须对应已定义的断点值，不能自定义如g-custom-2
修改 $grid-gutter-width 变量后编译 CSS 是否影响所有断点
会。Bootstrap 的 $grid-gutter-width 是基础变量，所有响应式 g-*<code> 类都基于它计算（如 <code>g-3 = $grid-gutter-width * .75）。改它等于批量调整全部断点的默认倍数基准。
- 真正“仅改某断点 gutter”必须覆盖具体工具类，例如：
@include media-breakpoint-up(md) { .g-md-4 { --bs-gutter-x: 2rem; --bs-gutter-y: 2rem; } } - 或者在 SCSS 中重定义断点专属变量：
$gutter-widths: (xs: 0, sm: .5rem, md: 2rem, lg: 1rem);，再重新生成g-*工具类 - 直接改 HTML class 不够用时，优先走 CSS 自定义属性方案，避免污染全局变量
g-* 类失效的常见原因和调试方法
最常踩的坑是父容器没加 row 类，或子元素不是 col ——gutter 依赖 Flex 布局和负边距抵消机制，脱离 row 就无效。
-
row必须存在，且不能被display: block等样式覆盖；检查 computed styles 中margin-left/margin-right是否为负值 - 如果用了
container-fluid但没套row，g-*类完全不生效 - 浏览器 devtools 查看元素是否应用了
--bs-gutter-x自定义属性；没出现说明类名拼错（比如写成g-md3而非g-md-3） - Vue/React 中动态拼接 class 时，确保字符串含连字符：
class="g-0 g-md-4"，而不是g0 gMd4
用 CSS 自定义属性动态控制 gutter 的实际写法
当需要 JS 控制或条件切换 gutter（比如暗色模式下加大间距），直接操作 --bs-gutter-x 最灵活，且不依赖断点前缀。
- 给
row元素设：style="--bs-gutter-x: 2rem; --bs-gutter-y: .5rem;" - 配合媒体查询更精准：
@media (min-width: 768px) { .my-row { --bs-gutter-x: 1.5rem; } } - 注意：这个变量只对当前
row生效，不影响其他行；且必须写在row上，写在col或外层容器无效 - 如果项目用了 Bootstrap 4，这套方式不适用——
--bs-gutter-x是 5+ 才引入的机制
断点级 gutter 的核心其实是“先清空再单点激活”，别指望一个 class 解决所有场景；变量覆盖和自定义属性才是可控性强的路子。
