Bootstrap怎么设置栅格系统间距-Bootstrap教程-PHP中文网

bootstrap 5 的栅格间距必须通过加在 .row 上的 gx-/gy-/g- 类设置，作用于 .col 或手动修改 margin/padding 会破坏 flex 布局；响应式需用 gx-{breakpoint}-{size} 叠加，全局修改须 sass 编译。

bootstrap 5 的栅格间距（gutter）必须通过作用于 .row 的 gx-、gy- 或 g- 工具类来设置，加在 .col 或普通容器上完全无效；手动改 margin 或 padding 会破坏 flex 布局配对逻辑，导致列偏移、换行错乱或横向滚动条。

Bootstrap 5 的列间距靠 .row 的负外边距和 .col 的正内边距协同实现，这个机制只响应直接子元素为 .col 的 .row。DevTools 里看不到 --bs-gutter-x 变量？大概率是类名写错了位置。

<div class="row gx-3"><div class="col-6">✅ 正确：.row 上设类，变量生效<li><code><div class="col-6 gx-3">❌ 无效：.col 上加类，CSS 变量不触发任何布局计算<li>React-Bootstrap 等封装组件要确认 <code>className 是否透传到原生 <div class="row">，否则类名被吃掉<li>嵌套 <code>.row（比如 .col 里再放网格）时，外层 gx-3 不会继承给内层，需单独加内层 gx-0 或 gx-1

gx- 控制列之间左右空隙，gy- 控制行之间上下空隙，二者逻辑独立，不能互相替代。常见错误是用 mb-4 模拟行间距，结果破坏了栅格基线对齐。

gx-0 清除所有断点下的水平 gutter，同时重置 .row 的负 margin-left/right 和 .col 的 padding-left/right
gy-3 不等于给 .row 加 margin-bottom: 1rem——它实际调整的是 .col 的 padding-top/bottom，并配合 .row 的负 margin-top/bottom，确保多行堆叠时不重叠也不脱节
想让两个紧邻的 .row 之间留空，更安全的做法是：<div class="row">...</div> <div class="row mt-4">...</div>，而不是给前一个 .row 加 mb-4
别混用 g-3（已废弃）或 v4 的 no-gutters，它们在 Bootstrap 5 中无样式规则

响应式 gutter 必须用 gx-{breakpoint}-{size} 这种格式叠加，不是媒体查询，也不是“仅在某断点生效”，而是“从该断点起生效，且优先级更高”。

VPS Bootstrap

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

下载

小屏无间隙、中屏起有 1rem、大屏变 1.5rem → 写 gx-0 gx-md-3 gx-lg-4，不是 gx-md-3 gx-lg-4（漏掉兜底，手机仍用默认 1.5rem）
gx-sm-2 表示 ≥576px 生效，不是“仅在 sm”，sm 及以上所有更大断点都用它，除非被 gx-lg-4 覆盖
自定义断点（如新增 xs: 0）后，必须同步调用 @include generate-gutter-classes()，否则 gx-xs-2 根本不会编译进 CSS
别用 px-3 模拟 gx-3：它只加 .col 的左右 padding，不抵消 .row 的负 margin，整行会向右偏移 15px，超出容器边界

CDN 引入或纯 CSS 项目里，改 $grid-gutter-width 变量毫无效果——工具类尺寸是编译时固化进 CSS 的，运行时读不到变量值。想统一全站 gutter，只能动源码再构建。

有效做法：在自定义 Sass 中，把 $grid-gutter-width: 0.75rem;（即 12px）写在 @import "bootstrap/scss/bootstrap" 之前，再重新编译
无效做法：:root { --bs-gutter-x: 0.75rem; } —— 这个变量不参与 gutter 类生成逻辑，写了也白写
$grid-gutter-width 在 Bootstrap 5.3+ 中仅用于初始化，真正起效的是 $gutters map 和编译后生成的 CSS 类
没 Sass 构建流程？老老实实用 gx-2 局部加，别试图打补丁覆盖 CSS，flex 布局下 margin/padding 冲突极难 debug

最易被忽略的是：gutter 是 .row 和 .col 的配对行为，不是单个元素的样式。哪怕你只改一行，也要确认它是否被父容器的 overflow: hidden 截断负 margin，或者被其他 CSS 规则用更高 specificity 覆盖了 --bs-gutter-x。