Bootstrap 5 默认列间距为0，需用gx-/gy-类显式设置；支持CSS变量--bs-gutter-x/y全局定制；BS4默认有15px间距，移除no-gutters即可恢复。
Bootstrap 5 默认没有列间距（gutter），必须显式启用
Bootstrap 5 的 .row 默认 gutter 为 0，也就是说，.col 并排时紧贴在一起，不会自动留白。这不是 bug，是设计选择——gutter 需要你主动加类控制。
正确做法是给 .row 添加 gx-*（水平间距）或 gy-*（垂直间距）类，例如：
<div class="row gx-3"> <div class="col-6">左</div> <div class="col-6">右</div> </div>
-
gx-0到gx-5对应 0–3rem 水平间距（单位是 rem，不是 px） -
gy-2表示行间垂直间距为 0.5rem - 单独用
g-3同时设置水平 + 垂直间距（等价于gx-3 gy-3） - 响应式写法如
gx-md-4：仅在md及以上断点生效
Bootstrap 4 怎么加列间距？用 no-gutters 的反向逻辑
Bootstrap 4 默认有 gutter（15px 左右），但很多人误以为“没间距”是因为自己加了 no-gutters 类。想恢复间距，直接删掉 no-gutters 即可；想自定义，得靠额外 CSS 或补丁类。
常见误区：
- 写了
no-gutters还想调间距 → 必须删掉它，再用 margin/padding 手动调，或者升级到 BS5 - 用
mx-n*在列上强行负边距“抵消”默认 gutter → 容易破坏响应式断点行为，不推荐 - 认为
col-6+col-6应该刚好占满 100% → 实际因 gutter 存在，总宽度会略超，需靠row的负 margin 抵消（BS4 默认已做）
自定义 gutter 大小：别改源码，用 CSS 变量覆盖
Bootstrap 5 支持通过 CSS 自定义变量调整全局 gutter 基准值，比写一堆 gx-* 更干净，尤其适合统一设计系统。
只需在 :root 或 .row 上重设变量：
:root {
--bs-gutter-x: 1.5rem; /* 水平间距 */
--bs-gutter-y: 1rem; /* 垂直间距 */
}
- 所有未指定
gx-*的.row会按这个新值计算 gutter - 仍可对特定行用
gx-0覆盖，优先级更高 - 注意：变量名固定为
--bs-gutter-x/--bs-gutter-y，拼错无效 - 如果用 Sass，直接改
$grid-gutter-width变量更彻底
列内元素撑开导致视觉“间距变大”，其实是 padding 问题
有时候看起来列之间空隙很大，检查发现不是 gutter 导致的，而是列内部元素（比如按钮、卡片）自带 margin 或父容器有 padding。
- 典型场景：
.col > .card，而.card默认有margin-bottom: 1rem→ 看似是列间距，实为内容溢出 - 调试技巧：浏览器选中
.row，看 computed 样式里margin-left/right是否来自gx-*类 - 快速验证：临时加
style="outline: 1px solid red"到.col，看红色框是否紧贴 —— 如果不贴，就是内部元素在推
这种“假间距”最容易被当成 gutter 问题去调 gx-，结果越调越乱。
