<p>Bootstrap 5 的 gutter 必须用 gx-/gy- 工具类控制，因 px-* 类不调整 .row 负外边距，会导致布局溢出；响应式需显式写全断点如 gx-0 gx-md-3；全局修改应调整 Sass 变量 $grid-gutter-width。</p>
Bootstrap 5 的 gutter（列间距）不能靠改 .row 的 margin 或 .col 的 padding 硬调，必须用 gx-/gy- 工具类，否则布局会溢出、错位或响应式失效。
为什么 px-* 类不能替代 gx-*
因为 px-3 只给单个 .col 加左右内边距，但没动 .row 的负外边距（如 margin-left: -15px）。结果就是列变宽了，行没“拉回来”，整体超出父容器边界——尤其在 .container-fluid 下会触发横向滚动条。
-
px-0→ 列内边距归零，但.row还在往左/右拽 15px，视觉上贴边，实际布局已失衡 -
gx-0→ 同时重置.row的负外边距和.col的内边距，真正清空 gutter - 想恢复默认？直接用
gx-3，别用px-3模拟——它只加 padding，不抵消 margin
怎么实现小屏无间距、中屏起有间距
响应式 gutter 必须显式写全断点覆盖，不能只写 gx-md-2 就指望小屏自动归零。Bootstrap 默认对所有 .row 应用了 gx-2（即 --bs-gutter-x: 0.5rem），所以不重置的话，手机上照样有间隙。
- 正确写法：
<div class="row gx-0 gx-md-3 gx-lg-4"> - 它会生成对应 CSS 自定义属性：
--bs-gutter-x: 0、--bs-gutter-x: 1rem、--bs-gutter-x: 1.5rem - 顺序无关，后写的断点类会覆盖前面的值
- 如果自定义了断点（比如新增
xs: 0），必须同步调用@include generate-gutter-classes()，否则gx-xs-2压根不会被编译出来
想全局统一改默认 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-*生效：这个变量仅用于部分工具类内部计算，不控制全部 gutter 行为 - 别碰
$guttersmap 除非你清楚generate-gutter-classes()调用位置，漏了就白改
两个 .row 之间怎么加垂直空隙
.row 本身默认没有上下 margin，它靠父容器（如 .container）的 padding 和内容元素（如 <p>）自带的 margin-bottom 维持垂直节奏。硬加 margin-bottom 到 .row 上，容易在嵌套场景（比如卡片里再套 .row）中撑开内边距，破坏一致性。
- 安全做法：给下方那个
.row加mt-4，比给上方加mb-4更可靠（避免 margin 折叠） - 更可控的写法：
.row + .row { margin-top: 1.5rem; }—— 只影响紧挨着的两个.row，不波及其他布局 - 别用
.row { margin-bottom: 1rem }全局覆盖，否则卡片、模态框里的嵌套.row全会被撑开 - 先检查是不是
<h3>或<p>自带的 margin 在干扰判断，不是.row的锅
最常被忽略的是：gutter 类必须加在 .row 上才生效，加在 .col 或普通 div 上完全无效；而 no-gutters 是 Bootstrap 4 的废弃类，5 里写了也不起作用。
