g-0必须加在.row上，因为Bootstrap 5的gutter由.row负外边距与.col内边距协同实现，g-0通过重置CSS变量--bs-gutter-x同步归零二者，而仅改.col的padding会破坏配对逻辑，导致内容偏移或错位。
直接用 g-0 作用于 .row 元素，就能彻底删除容器内列之间的默认间距；别在 .col 上加 px-0 或手动写 padding: 0，那会破坏栅格对齐逻辑。
为什么 g-0 必须加在 .row 上，而不是 .col
Bootstrap 5 的列间距（gutter）是靠 .row 的负外边距（如 margin-left: -15px）和 .col 的正内边距（如 padding-left: 15px）配对抵消实现的。只有 g-0 能同时重置这两者——它修改的是 CSS 变量 --bs-gutter-x，让整行的 gutter 行为同步归零。
如果只给 .col 加 px-0：
-
.row的负边距还在，但.col没了 padding，内容整体向左偏移 15px - 嵌套
.row时错位更明显，尤其在.container内会触发意外横向滚动 - 响应式断点（如
md、lg）下该失效的依然失效
g-0 和 gx-0、gy-0 的区别与使用场景
g-0 同时清空水平和垂直 gutter；gx-0 只关水平（列之间），gy-0 只关垂直（行之间）。三者都只能加在 .row 上。
常见组合：
- 表单左右两栏紧贴：用
g-0或gx-0即可 - 多行卡片堆叠但行间要留空：用
gx-0 gy-2，避免上下行挤成一团 - 全宽图片轮播 + 下方带标题的网格：轮播父
.row用g-0，标题区用g-3
响应式控制：移动端无间距、桌面端恢复默认怎么写
不能混用 px-0 px-lg-3——px-* 类不参与 gutter 计算，会导致列宽错乱。
正确写法是用响应式 gutter 类，例如：
-
gx-0 gx-lg-3：所有断点水平 gutter 归零，仅在lg（≥992px）及以上恢复 1rem 间距 -
gx-sm-2 gx-md-3 gx-xl-4：小屏起逐步加大水平间距，每级自动覆盖前一级 - 注意顺序无关，Bootstrap 按断点优先级生效，无需
!important
用了 g-0 还有缝隙？先检查子容器自身
即使 .row g-0 生效，两个 .col-md-6 并排仍看起来“没挨住”，问题往往不在 gutter：
- 子元素（如
.square-container）写了固定宽度（如width: 300px），而父列实际可用宽度是50% - 30px（含默认 gutter） - 忘了加
box-sizing: border-box，导致padding或border让真实宽度超限 -
.col内部用了text-align: right但没处理默认margin，视觉上产生“空隙”错觉
真正干净的双列紧贴，需要 .row g-0 + 子容器 width: 100% + box-sizing: border-box 三者配合。
