直接给.row加g-0可清除所有断点下的默认列间距，最简最安全；gx-0/gy-0分别只清水平/垂直间距，必须作用于.row才生效，加在.col上无效且会破坏栅格对齐基线。
直接给 .row 加 g-0 就能清除所有断点下的默认列间距，这是最简、最安全的方式；别去手动覆盖 padding 或 margin，那会破坏栅格对齐基线。
为什么不能在 .col 上加 gx-0 或 px-0
gutter 是 .row 和 .col 协同工作的结果：.row 用负外边距（如 margin-left: -15px）抵消 .col 的正内边距（padding-left: 15px）。如果你只在 .col 上写 px-0，.row 的负 margin 还在，整行内容会向右偏移 15px；DevTools 里也看不到 --bs-gutter-x 变量被设置，说明 gutter 控制机制根本没触发。
-
gx-0必须作用于.row，它会同时重置--bs-gutter-x并让子.col自动响应 - 写
<div class="col-6 gx-0">完全无效——类名不匹配选择器，CSS 规则压根不生效 - React-Bootstrap 等封装组件中传
className="gx-0"，要确认是否透传到了原生<div class="row">
g-0 vs gx-0 vs gy-0 的区别和适用场景
g-0 是全局清空：同时设 --bs-gutter-x: 0 和 --bs-gutter-y: 0，适合整行都不需要任何列间/行间间隙的场景（比如全宽图片轮播、无缝拼接方块）；gx-0 只清水平，gy-0 只清垂直，适合需要保留某一个方向间距的情况（如多行堆叠色块但列内不换行）。
- 双列布局中右侧嵌套子
.row要无水平间隙 → 用gx-0 - 单列内多个
.col-12堆叠，想消除上下空白 → 用gy-0 - 全屏 banner 图 + 文字层完全贴边 → 用
g-0，再配合p-0清除内容内边距
响应式清除 gutter 的正确写法
想“仅在 md 断点清除 gutter，其他保持默认”，不能只写 g-md-0——它只在 md 及以上启用 0 间距，而更小断点仍用默认值。真正要“仅 md 清除”，得先全局清空再单独开启其他断点，例如：g-0 g-sm-3 表示：所有断点默认无 gutter，但从 sm 开始恢复 3 级间距（即 0.75rem）。
立即学习“前端免费学习笔记（深入）”；
- 移动端无 gutter、桌面端恢复标准间距 →
g-0 g-md-3 - 小屏无 gutter、中屏 1rem、大屏 1.5rem →
g-0 g-sm-2 g-md-4 g-lg-6 - 自定义 CSS 变量微调单个
.row→ 直接写style="--bs-gutter-x: 0"，比工具类更轻量
最容易被忽略的一点是：gutter 控制永远从 .row 出发。哪怕只是临时调试，也别在 DevTools 里手动改 .col 的 padding 值——那只会让你更难定位为什么嵌套两层后子列突然错位了。
