直接给 .row 加 m-0 或 p-0 会破坏栅格对齐，正确方式是使用 gx-0 清除列间水平间距，它同步重置 gutter 变量与列内边距，而 m-0/p-0 多余且有害。
直接给 .row 加 m-0 或 p-0 会破坏栅格对齐
bootstrap 5 的 .row 依赖负外边距（如 margin-left: -0.75rem）来抵消子列 .col 的内边距，从而让整体宽度撑满容器。加 m-0 会清掉这个关键负 margin，导致所有列向右偏移、右侧内容被截断，甚至触发横向滚动条。
加 p-0 同样危险：它作用于 .row 自身，但 .row 默认是 display: flex，其 padding 不参与列间距计算，反而会让内部内容“缩进”或与相邻元素错位。
-
m-0→ 清除.row所有 margin，包括必需的负左右边距，列不再贴边 -
p-0→ 清除.row自身 padding，对 gutter 无影响，但可能干扰子元素垂直对齐 - 浏览器 DevTools 中能看到
.row的margin被覆盖为0，而--bs-gutter-x仍为默认值，系统失去平衡
想取消列间水平间距？必须用 gx-0
真正能安全清空列之间水平间隙的，只有作用于 .row 的 gx-0 类。它会同步设置 --bs-gutter-x: 0，并让框架自动重置子 .col 的 padding-left/padding-right 和 .row 的负 margin-left/margin-right，保持配对关系。
-
gx-0是唯一正确方式，no-gutters在 Bootstrap 5 中已彻底废弃，写了也无效 - 响应式写法如
gx-md-0 gx-lg-2：中屏起清零，大屏恢复 1rem 水平间距 - 别写
class="row gx-0 m-0"——m-0多余且有害，gx-0已完成全部协调
调整行与行之间的垂直空隙，别动 .row 自身 margin
.row 默认没有上下 margin，它的垂直节奏由父容器（如 .container）的 padding 和子内容（如 <p>、<h2>）自身的 margin 决定。手动给 .row 加 mt-4 或 mb-3 容易和标题、卡片等组件的默认边距叠加，尤其在响应式断点切换时出现高度跳变。
- 更稳妥的做法是给
.row的**前一个兄弟元素**加mb-4，或给**后一个兄弟元素**加mt-4 - 若必须控制两个紧邻
.row之间的空隙，用.row + .row { margin-top: 1.5rem; }—— 它只影响相邻行，不污染全局 - 检查是否误把
<h2>自带的margin-bottom当成 “行间距”，实际删掉它比调.row更有效
嵌套 row 时，gutter 控制要分层处理
当在 .col 内再放 .row（比如双列方形容器组），父列的 padding 和子 .row 的 gutter 会叠加，造成意外空白。这时不能靠 m-0/p-0 补救，而要分层使用 gx- 类。
- 外层
.row用gx-3保持主栏间距 - 内层
.row（在.col里）用gx-0或gx-1独立控制，避免继承外层值 - 切勿给
.col加px-0后再塞.row—— 这会破坏子.row的负 margin 抵消逻辑，导致内层列换行异常
最易被忽略的是：gutter 类只对直接子元素为 .col 的 .row 生效。如果中间插了 div、p 或自定义 wrapper，gx-* 就完全失效，此时必须重构嵌套结构，而不是硬加 m-0。
