Bootstrap 5 中 `gx-类（如gx-5）用于设置行内列的水平间距，但若未生效，通常因容器宽度不足、列未正确响应式分栏或 CSS 加载异常导致；需确保使用col-*` 响应式类、避免内容撑满容器，并验证 Bootstrap 版本与完整性。
bootstrap 5 中 `gx-*` 类（如 `gx-5`）用于设置行内列的水平间距，但若未生效，通常因容器宽度不足、列未正确响应式分栏或 css 加载异常导致；需确保使用 `col-*` 响应式类、避免内容撑满容器，并验证 bootstrap 版本与完整性。
在 Bootstrap 5 中，水平间距（gutters）依赖于 Flexbox 布局的精确计算，其生效有明确前提条件。你提供的原始代码中 <div class="row gx-5"> 看似符合文档示例，却未显示水平间隙，根本原因在于：<strong><code>.col 类默认为 flex: 1 1 0%，当两列未指定具体宽度（如 col-6）且父容器较窄时，浏览器可能将列压缩至最小内容宽度，导致 gx-5 的负外边距被抵消或不可见——尤其在仅两列、无明确断点类的情况下，Flex 伸缩行为会优先满足内容适配，而非保留 gutter 空隙。
✅ 正确做法是：显式声明列宽 + 确保容器具备足够空间。以下为推荐写法：
<div class="container px-4 text-center">
<div class="row gx-5">
<div class="col-6">
<div class="p-3 border">Column 1</div>
</div>
<div class="col-6">
<div class="p-3 border">Column 2</div>
</div>
</div>
</div>
? 关键点解析：
col-6明确分配每列占 50% 宽度，避免 Flex 自动收缩；gx-5（等价于--bs-gutter-x: 3rem）在.row上生效，通过margin-left: -1.5rem和padding-left: 1.5rem实现视觉间距；- 若使用
col（无数字后缀），务必确保父.row宽度 ≥ 两列内容总宽度 + 2×gutter，否则 gutter 会被“挤压消失”。
⚠️ 其他常见陷阱：
-
遗漏响应式断点：仅用
col在小屏下易塌陷，建议搭配col-md-6等提升兼容性； -
外部样式干扰：检查是否全局重置了
* { box-sizing: border-box }或覆盖了.row的display: flex； -
Bootstrap 版本混用：确认 CDN 使用的是 v5.3+（
gx-*/gy-*自 v5.0 起引入），旧版需用no-gutters+ 手动 margin； -
JavaScript 非必需：gutter 是纯 CSS 功能，
bootstrap.bundle.min.js可省略（除非用到 Tooltip/Popover 等组件）。
? 小结：水平间距不是“自动可见”的装饰属性，而是 Flex 布局中精心设计的负边距机制。要稳定启用 gx-*，请始终——
① 为列指定响应式宽度（如 col-6, col-md-4）；
② 避免单列内容过宽撑满容器；
③ 使用官方 CDN 并校验完整性（注意 integrity 属性防加载失败）；
④ 通过浏览器开发者工具检查 .row 是否渲染为 display: flex，以及子元素是否应用了 padding-left/right。
这样，你就能真正掌控 Bootstrap 的栅格间距，告别“只有垂直间距有效”的困惑。
