gx-3必须加在.row上且其直接子元素为.col才生效，否则--bs-gutter-x变量不注入；pe-5失效常因.row未嵌套在.container或.container-fluid内导致溢出；.g-3在Bootstrap 5中已拆分为gx-/gy-，.no-gutters被移除。
不是 CSS 没加载，也不是类名写错，而是 .row 和 .col 的嵌套结构或作用位置出了问题——间距类（如 gx-3、pe-5）只在正确上下文中才生效。
为什么 gx-3 加在 .row 上却没看到间隙？
Bootstrap 5 的列间距依赖 .row 的负外边距与 .col 的正内边距配对实现，这个机制只响应「.row 直接子元素是 .col」这一结构。一旦破坏，gx-* 类设置的 --bs-gutter-x 变量就无法被读取。
- 检查 DevTools 的
.row元素：确认display: flex存在，且--bs-gutter-x出现在Computed面板中；若没有，说明类名没加对位置 - 常见错误：
<div class="row gx-3"><section><div class="col-6">...</div></section></div>→.col-6不是.row的直接子元素，gx-3完全无效 - 正确写法必须是：
<div class="row gx-3"><div class="col-6">...</div><div class="col-6">...</div></div> - 嵌套时（比如
.col里再放网格），内层.row必须单独加gx-0或gx-1，它不会继承外层的gx-3
为什么 pe-5 看起来“没起作用”？
pe-5（padding-right: 3rem）本身很可能已生效，但因父容器未包裹 .container 或 .container-fluid，导致 .row 的负外边距溢出视口，整个布局被截断或触发横向滚动条——你看到的是“消失”，其实是视觉错位。
- 验证方法：给目标元素临时加
background-color，或在 DevTools 的Computed面板里查padding-right是否为3rem且未被覆盖 - 关键修复：确保
.row始终嵌套在.container或.container-fluid内，例如：<div class="container-fluid"><div class="row">...</div></div> - 别在
.row上额外加px-*或mx-*—— 它自带负 margin，叠加后会破坏列对齐 - RTL 页面中慎用
pr-*，改用pe-*（end会自动适配方向）
为什么升级到 Bootstrap 5 后旧的 .g-3 或 .no-gutters 失效？
Bootstrap 5 将 gutter 拆分为 gx-（水平）、gy-（垂直）两个独立维度，.g-3 虽仍存在，但语义和行为已变；而 .no-gutters 在 v5 中已被移除，不再有对应样式规则。
立即学习“前端免费学习笔记（深入）”；
-
.g-3现在表示“同时启用水平 + 垂直间距”，若你原来只依赖水平间隙，应改用gx-3 - 清空所有 gutter 的唯一可靠方式是
gx-0 gy-0或简写g-0；.no-gutters在 v5 中无定义，写了等于白写 - 响应式控制必须显式补全断点链，例如：
gx-0 gx-sm-2 gx-lg-4—— 缺少gx-0，xs 下仍用默认gx-2（0.5rem） - 自定义 CSS 若覆盖了
:root中的--bs-gutter-x，会压制所有gx-*类效果，排查时优先看变量来源
为什么手动改 .col 的 padding 或 .row 的 margin 更糟？
栅格系统靠精确配对工作：.row 的 margin-left: -15px 抵消 .col 的 padding-left: 15px，才能让内容撑满容器宽度。任意一方被手动修改，都会打破这个平衡。
- 在
.col上写px-0：只清了内边距，.row的负 margin 还在 → 整行向左偏移 15px，右侧出现空白 - 给
.row加mx-3：叠加负 margin，可能让列完全溢出，触发横向滚动条 - 真正安全的干预方式只有三种：用
gx-/gy-工具类、动态设--bs-gutter-x变量、或重编译 Sass（如修改$grid-gutter-width） - 调试时别用 DevTools 直接改
.col的 padding 值——那只会掩盖根本问题，让嵌套错位更难定位
