最安全的做法是直接用 gx-0 作用于 .row；Bootstrap 5+ 的 gutter 由 .row 负外边距与 .col 内边距协同实现，gx-0 通过重置 CSS 变量确保响应式一致性，避免 px-0 等破坏布局流。
直接用 gx-0 作用于 .row 是最安全的做法
bootstrap 5+ 的 gutter（列间距）不是靠单个元素的 padding 或 margin 实现的，而是由 .row 的负外边距（margin-left: -15px）和 .col 的左右内边距（padding-left: 15px / padding-right: 15px）协同抵消形成的。硬删 .col 的 padding 会破坏这个配对逻辑，导致整行内容向左/右偏移 15px，视觉上“缩进”或“溢出”。gx-0 是官方提供的语义化工具类，它会同时重置 .row 的 --bs-gutter-x css 变量，并让子 .col 的内边距自动响应，不破布局流。
别在 .col 上写 px-0 或 !important
这类写法看似“清除了内边距”，但实际只改了 .col 的 padding，没动 .row 的负外边距，结果就是：容器左右各多出 15px 白边；响应式断点（如 md、lg）下间距失效；嵌套 .row 时子列错位更严重。尤其当页面用了 .container 且漏掉 .row 时，px-0 会让问题更隐蔽——你看到的是“列贴边”，其实是整个栅格基线崩了。
需要响应式控制时，用 gx-0 + gx-lg-3 这类组合
移动端常需无间距（比如图片全宽轮播），桌面端又希望恢复标准 gutter，这时不能靠 px-0 px-lg-3 混搭——因为 px-* 类不参与 gutter 计算逻辑，会导致列宽计算偏差、换行异常。正确方式是：
-
gx-0全局取消水平 gutter -
gx-sm-2在小屏及以上启用 0.5rem 水平间距 -
gx-lg-4在大屏启用 1.5rem 水平间距
这些类都作用于 .row，内部自动同步更新 CSS 变量，保证所有断点下的列宽、换行、嵌套行为一致。
旧项目还在用 Bootstrap 4？.no-gutters 要慎用
Bootstrap 4 的 .no-gutters 类本质是手动重置 .row 的 margin 和子 .col 的 padding，但它不响应断点，也无法与 offset-、order- 等类协同。如果必须兼容 v4，建议只在明确不需要响应式 gutter 的静态模块中使用，并确认没有嵌套 .row；否则优先升级到 v5+，用 gx-* 替代。
真正容易被忽略的点是：gutter 控制永远要从 .row 出发，而不是盯着 .col 去“修边”。哪怕只是临时调试，也别用浏览器开发者工具直接改 .col 的 padding 值——那只会让你更难定位为什么某一层嵌套突然错位了。
