g-0是Bootstrap 5.1+中作用于.row的原生工具类，用于将水平与垂直栅格间距（gutter）全部归零，同步重置.row负外边距及子.col内边距，确保列宽精确分配、避免换行或偏移。
g-0 是什么，它真能去掉所有列间距？
g-0 是 Bootstrap 5.1+ 提供的原生 gutter 工具类，作用于 .row 元素，表示「水平 + 垂直 gutter 全部归零」。它不是简单地删 .col 的 padding，而是同步重置 .row 的负外边距（如 margin-left: -15px）和所有子 .col 的左右/上下内边距，让整个栅格基线保持对齐。
常见错误是以为 g-0 只影响视觉——其实它直接影响列宽计算：Bootstrap 的列宽（如 col-6）是按「容器宽度 − gutter 总量」动态分配的。g-0 后，两列 col-6 才真正各占 50%，否则会因 gutter 占位导致换行或溢出。
为什么不能用 px-0 替代 g-0？
因为 px-0 只改 .col 的 padding-left/right，不碰 .row 的负 margin。结果就是：
-
.row还在往左拽 15px，.col却没了 padding → 整行内容向左偏移 15px - 右侧多出 15px 白边（尤其在
.container-fluid下易触发横向滚动条） - 嵌套
.row时，子列错位更明显，比如轮播图卡片错行 - 响应式断点（如
md）下，px-md-2和默认 gutter 值不匹配，列宽计算失准
如何响应式控制：移动端无间距，桌面端恢复默认？
别写 px-0 px-lg-3 —— 它们和 gutter 系统不联动。正确方式是用 gx- 响应式类，例如：
-
gx-0：所有断点下水平 gutter 归零 -
gx-sm-2：≥sm 断点启用 0.5rem 水平间距（8px） -
gx-lg-3：≥lg 断点启用 1rem 水平间距（16px），对应 Bootstrap 默认值
这些类都作用于 .row，内部通过 CSS 变量 --bs-gutter-x 自动同步更新，保证列宽、换行、嵌套行为在所有断点下一致。
嵌套 row 或特殊容器里，g-0 还管用吗？
管用，但必须加在每一层 .row 上。比如你有两层嵌套：
<div class="row g-0">
<div class="col-md-6">
<div class="row g-0"> <!-- 子 row 也得加 g-0 -->
<div class="col-6 p-0"></div>
<div class="col-6 p-0"></div>
</div>
</div>
</div>
注意：p-0 在这里只是确保内容贴边，不参与 gutter 计算；真正起作用的仍是 g-0 对 .row 和其直接子 .col 的配对重置。漏掉某一层 .row 的 g-0，那一层就会恢复默认间距，导致视觉断层。
最常被忽略的是：gutter 控制只对直接子 .col 生效。如果你把 g-0 加在 .container 或 .navbar 上，它完全没效果——类名必须作用于 .row。
