Bootstrap 的 g-*（如 g-3）类仅对 CSS Grid 容器生效，不能直接用于传统 .row + .col 的 Flex 布局；若在 .row 上使用却无水平间隙，根本原因是 .row 默认为 display: flex，而 gap 在 Flex 布局中仅在现代浏览器（Chrome 104+、Firefox 103+、Safari 16.4+）中受支持，且需确保无干扰样式覆盖。
bootstrap 的 `g-*`（如 `g-3`）类仅对 css grid 容器生效，不能直接用于传统 `.row` + `.col` 的 flex 布局；若在 `.row` 上使用却无水平间隙，根本原因是 `.row` 默认为 `display: flex`，而 `gap` 在 flex 布局中**仅在现代浏览器（chrome 104+、firefox 103+、safari 16.4+）中受支持**，且需确保无干扰样式覆盖。
你遇到的问题非常典型：代码结构完全符合 Bootstrap 文档示例，.row.g-3 却只显示垂直间隙（row-gap），水平间隙（column-gap）缺失——这并非 Bug，而是由 CSS 渲染机制 + 浏览器兼容性 + 样式冲突 共同导致的。
✅ 正确前提：gap 在 Flex 布局中“有条件生效”
Bootstrap 5.3+ 的 .row 默认是 display: flex，而 gap 属性自 CSS Level 2 起就支持 Flex 容器，但实际支持度依赖浏览器版本与渲染引擎：
- ✅ Chrome ≥ 104、Firefox ≥ 103、Safari ≥ 16.4：
gap在 Flex 中完整生效（含column-gap和row-gap）； - ⚠️ 旧版浏览器（如 Chrome 90、Edge 95）或某些移动端 WebView：
gap可能被忽略，或仅row-gap生效； - ❌ IE：完全不支持
gap，无论 Flex 或 Grid。
你的截图中“只有垂直间隙”，极大概率是运行环境未满足上述现代浏览器要求，或存在隐式样式覆盖。
? 排查三步法（快速定位原因）
-
检查 computed styles
在 Chrome DevTools 中选中.row元素 → 切换到 Computed 面板 → 搜索gap：- 若显示
gap: 1rem（或g-3对应值），说明类已加载； - 若显示
gap: normal或为空，则g-*类未生效（可能被更高优先级样式覆盖，或 CSS 文件未正确引入）。
- 若显示
-
确认 Bootstrap 版本与完整加载
g-*工具类在 Bootstrap 5.2+ 才正式引入，且需确保引入的是 完整编译版 CSS（非精简版或自定义构建）。检查 HTML 中是否引用了：<!-- ✅ 正确：包含 utilities.css --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
若使用自定义 Sass 构建，请确认
scss/utilities/_spacing.scss已导入，且$enable-cssgrid: true*不影响 `g-类**（g-*` 是通用间距工具类，与 CSS Grid 启用开关无关）。 -
排除 margin/padding 干扰
.col默认带有padding-left/right: 15px，这是 Bootstrap 栅格“间隙”的核心实现机制（配合.row的负外边距）。若你手动重置了.col的 padding（如.item { padding: 0; }），会直接破坏列间视觉间隙，此时g-3无法补救。
✅ 正确做法：不要修改.col内边距；如需调整间距，统一使用gx-*（水平）或gy-*（垂直）类：<div class="row gx-3 gy-4"> <!-- 显式分离水平/垂直间隙 --> <div class="col-lg-3 col-sm-6 col-12 item">...</div> <!-- 其他列 --> </div>
?️ 两种可靠解决方案（按场景选择）
方案一：坚持使用 Bootstrap 传统栅格（推荐大多数项目）
直接替换 g-3 为 gx-3（仅水平间隙）或 gx-3 gy-3（双向）：
<div class="container">
<div class="row gx-3 gy-3"> <!-- ✅ 替换为 gx-/gy- -->
<div class="col-lg-3 col-sm-6 col-12 item">
<img src="./images/1.png" class="img-fluid" alt="">
<div class="name">Chair 01</div>
<div class="price">$200</div>
<button class="btn btn-dark">Add To Cart</button>
</div>
<!-- 其他三项相同 -->
</div>
</div>?
gx-*/gy-*是 Bootstrap 5.3+ 专为.row设计的间隙工具类，底层直接作用于.row的column-gap/row-gap，无需依赖浏览器 Flex gap 支持，全版本兼容。
方案二：升级为 CSS Grid 布局（适合新项目或复杂布局）
彻底弃用 .row + .col，改用原生 Grid：
<div class="container">
<div class="d-grid grid-5-cols"
style="grid-template-columns: repeat(4, 1fr); gap: 1rem;">
<div class="item">
<img src="./images/1.png" class="img-fluid" alt="">
<div class="name">Chair 01</div>
<div class="price">$200</div>
<button class="btn btn-dark">Add To Cart</button>
</div>
<!-- 其他三项相同 -->
</div>
</div>并添加响应式支持（复用 Bootstrap 断点）：
.grid-5-cols {
grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 576px) {
.grid-5-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
.grid-5-cols { grid-template-columns: repeat(4, 1fr); }
}✅ 优势：
gap在 Grid 中全浏览器支持更成熟（包括 Safari 10.1+），语义清晰，无.row负边距陷阱。
⚠️ 关键注意事项总结
-
g-*类 ≠ 万能间隙开关：它本质是gap: X的快捷写法，其行为完全取决于父容器的display类型（Flex/Grid）及浏览器支持度； - 不要混用
g-*与手动margin：例如给.item加me-3，会与g-3叠加导致间距翻倍； -
.row的间隙机制是“负外边距 + 正内边距”配对设计，强行用g-*替代会破坏这一精密平衡； - 若必须兼容 IE 或老旧 WebView，请回归
mx-*/px-*工具类（如mx-2控制列间水平距离）。
真正可靠的栅格间隙，不在于“用了什么类”，而在于理解其背后的设计逻辑，并选择与项目目标一致的技术路径。
