Bootstrap Gutters间距用法 Bootstrap 5中g-,gx-,gy-*如何使用-Bootstrap教程-PHP中文网

Bootstrap列间距由.row负外边距与.col内边距协同实现，直接改.col padding会破坏对齐；应使用gx-/gy-类统一控制，响应式写法如gx-0 gx-lg-3可安全适配多端。

为什么直接改 `.col` 的 `padding` 会出问题

bootstrap 的列间距（gutter）不是靠单个 .col 的左右内边距“撑”出来的，而是 .row 和 .col 协同作用的结果：.row 有 margin-left: -15px 和 margin-right: -15px，.col 则有 padding-left: 15px 和 padding-right: 15px。两者抵消后，内容才对齐容器边缘，列之间又保持了间隙。

如果你手动给 .col 加 px-0 或写 padding: 0，只清掉了内边距，但 .row 的负外边距还在——结果就是整行向左/右偏移 15px，视觉上出现意外空白或截断。

别在 .col 上用 px-* 类调水平间距，它不匹配 gutter 机制
别给 .row 写 margin: 0，会破坏所有列的对齐基线
想取消间距？用 gx-0，它会同时重置 .row 的负边距和 .col 的 padding

`gx-` 和 `gy-` 到底控制谁、在哪生效

gx-* 只作用于 .row 元素，影响的是该行内所有 .col 之间的**水平间隙**；gy-* 同理，控制上下行之间的**垂直间隙**。它们不是加在列上，而是修改整行的 gutter 行为，所以必须写在 <div class="row gx-3"> 这样的地方。 <p>值从 <code>0 到 5，对应预设尺寸（如 gx-3 ≈ 1rem），也支持响应式写法：gx-md-0 gx-lg-4 表示中屏无水平间隙、大屏恢复标准间距。

gx-0：彻底关闭列间水平 gutter，适合卡片紧贴、全宽图片拼接等场景
gy-2：常用于多行表单或堆叠卡片，避免行与行之间空太大
g-3：同时设置水平 + 垂直 gutter，适合网格画廊类布局

移动端无间隙 + 桌面端恢复默认，怎么写才不翻车

很多人想“小屏挤在一起，大屏拉开”，但用 px-0 px-lg-3 是错的——px-lg-3 只加右边距 0.75rem，没处理 .row 的负边距，导致大屏列整体右偏。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

正确做法是用响应式 gutter 类，让系统自动同步调整 .row 和 .col：

<div class="row gx-0 gx-lg-3">
  <div class="col-md-6">左栏</div>
  <div class="col-md-6">右栏</div>
</div>

gx-0 在所有断点生效，但会被更具体的响应式类覆盖
gx-lg-3 仅在 lg（≥992px）及以上生效，且会自动修正 .row margin 和 .col padding
不用写 !important，也不用自定义 CSS，框架原生支持

什么时候该用 `g-*` 而不是自己写 CSS

除非你在定制 Sass 主题（比如全局把 $grid-gutter-width 改成 2rem），否则不要碰原始变量或手写 margin/padding。原生 g-* 类的优势在于：它随断点变化自动切换，不影响 Flex 布局逻辑，且能被 Bootstrap 的响应式工具类（如 flex-wrap、order）无缝兼容。