Bootstrap 5 的 g-*（如 g-3）类仅对 CSS Grid 容器生效，而默认 .row 是 Flex 布局；若在 .row 上直接使用 g-* 却无水平间距，根本原因是类名语义与布局模式不匹配——应改用 gx-* 工具类或确保容器为真正的 display: grid。
bootstrap 5 的 `g-*`（如 `g-3`）类仅对 css grid 容器生效，而默认 `.row` 是 flex 布局；若在 `.row` 上直接使用 `g-*` 却无水平间距，根本原因是类名语义与布局模式不匹配——应改用 `gx-*` 工具类或确保容器为真正的 `display: grid`。
你遇到的问题非常典型：代码结构看似与 Bootstrap 官方示例一致，但 g-3 在 .row 中只表现出垂直间距（row-gap），缺失水平间隙（column-gap）。这不是浏览器兼容性或版本问题，而是工具类设计意图与布局机制的错配所致。
? 根本原因解析
Bootstrap 5 将 g-* 类明确定义为 Grid 专用间距工具（见 官方文档：Gap Utilities），其底层 CSS 规则仅作用于 display: grid 或 display: inline-grid 元素：
.g-3 {
gap: 1rem !important; /* 仅在 grid 容器中触发 column-gap + row-gap */
}而 .row 默认是 display: flex（非 grid），此时 gap 属性被浏览器完全忽略（Flex 布局直到 Chrome 84+ 才支持 gap，且 Bootstrap 5 的 g-* 并未为此做降级适配）。因此，g-3 在 .row 中实际只生效了 row-gap（因部分现代浏览器对 Flex 的 gap 有渐进支持），而 column-gap 仍为 0 —— 这正是你看到“只有垂直间隙、没有水平间隙”的技术根源。
✅ 正确做法：对 .row（Flex 容器）使用 gx-* / gy-* 类
❌ 错误做法：对 .row 使用 g-*（它不是 Grid 容器）
✅ 正确修复方案（推荐）
将你的 <div class="row g-3"> 改为：<pre class="brush:php;toolbar:false;"><div class="row gx-3 gy-3">
<!-- 四个 .col-... 子项保持不变 -->
<div class="item col-lg-3 col-sm-6 col-12">...</div>
<div class="item col-lg-3 col-sm-6 col-12">...</div>
<div class="item col-lg-3 col-sm-6 col-12">...</div>
<div class="item col-lg-3 col-sm-6 col-12">...</div>
</div></pre><ul>
<li>
<code>gx-3 → 控制水平间距（等效于 --bs-gutter-x: 1rem）
gy-3 → 控制垂直间距（等效于 --bs-gutter-y: 1rem） ? 提示：
gx-*和gy-*是 Bootstrap 5 专为 Flex.row设计的响应式 gutter 工具类，它们通过.row的负 margin 与.col的正 padding 精准配对实现“视觉无缝间隙”，这是g-*无法替代的核心能力。
⚠️ 其他常见陷阱与规避建议
| 问题现象 | 原因 | 解决方式 |
|---|---|---|
| 水平间隙仍不出现 |
.col 未直接置于 .row 内（如中间嵌套了 <div>）</div>
|
检查 DOM 结构：.row > .col-* 必须为直系父子关系 |
| 间距过大/错位 | 同时使用 g-3 和 gx-3 导致叠加（如 g-3 被部分浏览器解析为 row-gap，gx-3 又注入 --bs-gutter-x） |
二选一：纯 Flex 场景只用 gx-/gy-；纯 Grid 场景才用 g-*
|
| 小屏下间隙异常 | 未配置响应式断点链（如漏写 gx-sm-3） |
补全断点：gx-0 gx-sm-2 gx-md-3 gx-lg-4
|
| RTL 页面右侧空白消失 | 错用 pl-/pr- 而非逻辑属性 ps-/pe-
|
替换为 ps-3 pe-3（自动适配 LTR/RTL） |
? 进阶选择：真 Grid 布局（需主动启用）
若你确实需要 g-* 的原生 Grid 体验（例如跨列、区域命名、行列独立控制），请放弃 .row/.col 结构，改用原生 Grid：
<!-- 移除 .row/.col，用纯 Grid --> <div class="d-grid gap-3" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))))); <div class="item">Chair 01</div> <div class="item">Chair 02</div> <div class="item">Chair 03</div> <div class="item">Chair 04</div> </div>
-
d-grid→ 设置display: grid -
gap-3→ 此时g-3/gap-3完全生效（水平 + 垂直） -
repeat(auto-fit, ...)→ 响应式列数自动适配，无需.col-*
⚠️ 注意：此方案不再依赖 Bootstrap 栅格系统，
.col-*类在此上下文中完全无效，需用grid-column或minmax()控制尺寸。
✅ 总结一句话
g-*是 Grid 的通行证，gx-/gy-*才是.row的正确钥匙。
在 Bootstrap 5 中，请永远记住：.row= Flex → 用gx-/gy-*；d-grid= Grid → 用g-*/gap-*。混淆二者，是 90% “gap 不生效” 问题的终极元凶。
现在，只需将 g-3 替换为 gx-3 gy-3，你的四列商品卡片就会立即呈现均匀、响应式的水平与垂直间距——无需修改任何其他代码，也无需升级或重编译。
