<p>Bootstrap 5+ 的 gutter 由 .row 负外边距与 .col 正内边距协同实现，应使用 gx-/gy- 工具类调整，而非修改 .row margin 或 .col padding；px- 类无法替代 gx-，因它不重置 .row 的负外边距，易致布局溢出或失衡。</p>
直接用 gx- 和 gy- 工具类改，别碰 .row 的 margin 或 .col 的 padding
bootstrap 5+ 的 gutter（列间距）不是靠单个列的 padding 硬撑出来的，而是靠 .row 的负外边距 + .col 的正内边距协同实现的。手动改其中一项，比如给 .col 加 px-0，会破坏这个平衡，导致整体宽度收缩、内容左偏或右侧留白。
-
gx-0彻底移除所有断点下的水平 gutter；gx-3设为默认 1rem（16px），gx-4是 1.5rem（24px） - 响应式写法如
gx-md-2 gx-lg-4：中屏起用较小间距，大屏加大——它会自动覆盖前面的规则，无需媒体查询 - 别写
style="margin: 0"或自定义 CSS 覆盖.row，否则.container宽度对不齐，打印或缩放时容易错位
为什么 px-* 类不能替代 gx-
因为 px-3 只是给单个 .col 加左右 padding，但没动 .row 的 margin-left: -15px。结果就是：列变宽了，但行没“拉回来”，整体超出容器边界，尤其在 .container-fluid 下会触发横向滚动条。
-
px-0→ 列内边距归零，但.row还在拼命往左/右拽 15px，视觉上列紧贴边缘，实际布局已失衡 -
gx-0→ 同时重置.row的负外边距和.col的内边距，真正“清空 gutter” - 想恢复默认？直接用
gx-3，别试图用px-3模拟——它只加 padding，不抵消 margin
需要全局改默认 gutter 大小怎么办
如果项目里几十个 .row 都要统一调成 12px 间距，一个个加 gx-2 很累，这时该动配置源头，而不是打补丁。
- 用 Sass 编译的项目：改变量
$grid-gutter-width: 0.75rem（即 12px），再重新构建 CSS - 没 Sass？那就老实用
gx-2—— Bootstrap 官方明确不推荐通过覆盖 CSS 来改 gutter，因为 flex 布局下 margin/padding 冲突太难 debug - 千万别在
:root里重定义--bs-gutter-x后再指望gx-*生效：这个 CSS 变量仅用于部分工具类内部计算，不控制全部 gutter 行为
双列方形容器之间还有缝隙？先检查 box-sizing 和宽度计算
即使 gx-0 用了，两个 .col-md-6 并排仍看起来“没挨住”，往往不是 gutter 问题，而是子容器自己留了空。
-
.square-container { width: 100%; height: 235px; }是对的；写成width: 300px就会因父列 padding 导致换行或溢出 - 务必加
box-sizing: border-box，否则padding: 10px会让真实宽度变成100% + 20px - 如果用
aspect-ratio: 1 / 1，注意 IE 和旧版 Safari 不支持，得 fallback 到 padding-top 百分比技巧
.row 和 .col 必须成对出现、层级干净，任何中间 wrapper、额外 padding 或 display 变更，都会让 gutter 工具类失效。 
