Bootstrap 5 列间距默认变大，因未显式使用gx-*类时会继承:root中--bs-gutter-x:1.5rem，且v5移除了v4的隐式紧贴逻辑，要求主动声明间距意图。
Bootstrap 5 的列间距（gutter）默认变大了，是因为 $grid-gutter-width 从 v4 的 1.5rem（24px）**上调到了 1.5rem（24px）但实际生效值受 CSS 变量和断点影响更大**——真正导致“看起来变大”的主因是：v5 移除了全局重置逻辑，且默认对所有 .row 注入了 --bs-gutter-x: 1.5rem，而 v4 的 no-gutters 是显式关闭，v5 没有“默认关闭”选项，所以未加 gx-* 类的 .row 会按新默认值渲染。
默认 gutter 值在 v5 中已固化为 CSS 变量
v5 把列间距控制权从纯 Sass 变量移交给了 CSS 自定义属性：--bs-gutter-x 和 --bs-gutter-y。它们在 :root 中被设为 1.5rem（即 24px），且所有未显式覆盖的 .row 都会继承该值。这不是“bug”，而是设计变更：v5 要求你**主动声明间距意图**，而不是靠“不写类=无间距”来兜底。
-
gx-0、gx-3等工具类本质是设置--bs-gutter-x的不同值，并触发对应 margin/padding 计算 - 不写任何
gx-*类 → 浏览器用:root中的--bs-gutter-x: 1.5rem→ 列间出现 24px 间隙 - v4 中没写
no-gutters时，默认是“紧贴”，v5 中没写gx-*时，默认是“宽松”
响应式断点让“变大感”更明显
v5 的 gutter 工具类支持断点前缀（如 gx-md-2），但如果你只写了 gx-md-3，小屏下仍走 :root 默认值 1.5rem —— 这就造成“手机屏反而比平板还宽”的错觉。
- 错误写法：
<div class="row gx-md-2">→ sm 及以下仍用 1.5rem，视觉上列距“突兀变大” - 正确写法：
<div class="row gx-0 gx-md-2 gx-lg-3">→ 显式归零小屏，再逐级增加 - 别依赖“没写 = 小”，v5 没这种隐式降级逻辑
React/Vue 封装组件常漏传 gutter 类
像 react-bootstrap 的 Row 或 vue-bootstrap 的 b-row，若未把 className 透传到原生 <div class="row">，那么 gx-2 这类类名就根本不会出现在 DOM 上。
立即学习“前端免费学习笔记（深入）”；
- DevTools 里看不到
--bs-gutter-x被修改，说明类名被封装层吞掉了 - 检查渲染后的 HTML：如果
<div class="row">没有gx-*，那就是封装问题，不是 Bootstrap 本身变大 - 部分 UI 库提供
gutterprop（如<Row gutter={2}>），优先用它而非 className
别用 px-* 类“模拟” gutter 来掩盖问题
看到列间距大，有人会顺手给 .col 加 px-0 或 mx-0，这只会让布局更糟：
-
px-0只清.col的 padding，但.row的负 margin（如margin-left: -1.5rem）还在 → 整行右偏 24px，右侧内容被截断 -
mx-0直接干掉.row的负边距 → 所有列内边距失去抵消，列总宽度超 100%，触发横向滚动条 - 真要调窄，必须用
gx-2（1rem）或gx-1（0.5rem），让框架同步修正 margin + padding
最易被忽略的一点：gutter 控制的是「列与列之间」的空隙，不是「内容到列边缘」的距离。如果你觉得文字贴边太紧，该调的是 .col 内部的 px-3 或自定义 padding，而不是动 gx-* —— 后者一改，整个栅格基线就偏了。
