Bootstrap 5 中 gx-* 类（如 gx-5）用于设置行内列的水平间距，但若未生效，通常因缺少 col-* 响应式类、容器宽度不足或浏览器渲染限制导致；正确用法需确保列具有明确宽度（如 col-6）且父容器具备足够空间。
bootstrap 5 中 `gx-*` 类（如 `gx-5`）用于设置行内列的水平间距，但若未生效，通常因缺少 `col-*` 响应式类、容器宽度不足或浏览器渲染限制导致；正确用法需确保列具有明确宽度（如 `col-6`）且父容器具备足够空间。
在 Bootstrap 5 中，水平间距（gutters）依赖于 Flexbox 的 gap 属性，而该属性仅在 *Flex 容器（即 .row）中对直接子元素（即 `.col-）生效**。如果你使用了gx-5却看不到水平间隙，最常见的原因是：**.col类未指定具体断点宽度（如col-6、col-md-4），导致列默认为flex: 1 0 0%—— 此时列宽度坍缩为 0，gap` 虽存在，但因列不可见或紧贴边缘，视觉上“消失”**。
✅ 正确做法：为每一列显式声明响应式栅格类（如 col-6、col-sm-4），确保其拥有可渲染的宽度：
<div class="container px-4 text-center">
<div class="row gx-5"> <!-- ✅ 水平间距生效 -->
<div class="col-6 border">
<div class="p-3">Column 1</div>
</div>
<div class="col-6 border">
<div class="p-3">Column 2</div>
</div>
</div>
</div>⚠️ 注意事项：
- ❌ 错误示例：仅用
<div class="col">（无断点类）→ 列宽度为 <code>0%，gx-*不可见； - ✅ 替代方案：若需等宽自适应列，使用
col+flex-fill或更推荐col-6/col-sm-3等明确类； - ? 验证技巧：在浏览器开发者工具中检查
.row元素是否具有display: flex和gap计算值（如gap: 3rem），并确认.col-*元素有正向flex-basis或width； - ? 容器宽度限制：
.container在小屏幕下宽度有限（如sm下仅540px），若两列各需270px+gx-5（≈3rem = 48px），总宽可能溢出导致换行——此时建议搭配flex-wrap: wrap或改用gy-*（垂直间距）或响应式类（如col-12 col-md-6）。
? 小结：gx-* 不是“魔法间距”，它严格依赖 Flex 布局的健康状态。始终为 .col 添加断点类（哪怕只是 col-12），并确保父 .row 未被其他 CSS 干扰 display 或 flex-direction，即可稳定启用水平 gutters。
