必须用 gx-0 加在 .row 上，因为 Bootstrap 5+ 的栅格间距依赖 .row 的负 margin 与 .col 的 padding 配对实现；若仅清除 .col 的 padding（如 px-0），会破坏配对导致内容左偏、右侧白边或滚动条。
必须用 gx-0 加在 .row 上，其他任何写法都会破坏栅格对齐逻辑。
为什么不能给 .col 加 px-0 或手动写 padding: 0
Bootstrap 5+ 的列间距（gutter）是靠 .row 的负外边距（如 margin-left: -0.75rem）和 .col 的左右内边距（padding-left: 0.75rem / padding-right: 0.75rem）配对实现的。只清 .col 的 padding，等于拆掉一半机制：.row 还在往左拉，.col 却不往外撑，结果就是整行内容向左偏移 0.75rem，右侧出现白边，甚至触发横向滚动条。
- 浏览器 DevTools 里能看到
.row的 margin 被覆盖为0，但--bs-gutter-x变量仍是默认值，系统失衡 - 嵌套
.row时错位更明显，尤其在.container内会放大问题 -
px-0不响应断点，px-lg-3这类组合也无效——它根本不参与 gutter 计算
gx-0 是唯一安全、语义清晰的解法
gx-0 作用于 .row，会同步重置 CSS 变量 --bs-gutter-x: 0，并让所有子 .col 的左右 padding 和 .row 的负 margin 自动归零，保持配对关系不崩。
- 写法：<div class="row
gx-0">…</div> - 别混写
class="row gx-0 m-0"——m-0多余且有害，gx-0已完成全部协调 - 若需响应式控制，用
gx-sm-0 gx-lg-3，不是px-sm-0 px-lg-3
嵌套 .row 时，gutter 要分层处理
当在 .col-md-6 里再放一个 .row（比如双列方形容器组），父列的 padding 和子 .row 的 gutter 会叠加，造成意外空白。这时不能靠 m-0/p-0 补救。
- 外层
.row用gx-3保持主栏间距 - 内层
.row（在.col里）用gx-0或gx-1独立控制，避免继承外层值 - 切勿给
.col加px-0后再塞.row——这会让子.row的负 margin 无法抵消父列 padding，导致换行异常
真正容易被忽略的是：gx- 类只对直接子元素为 .col 的 .row 生效；哪怕只是临时调试，也别用 DevTools 直接改 .col 的 padding 值——那只会让你更难定位为什么某一层嵌套突然错位了。
