跳转到主内容
趣航编程网 - 趣学编程，启航技术之路！
📁 网站地图

Bootstrap 栅格系统 gutters 水平垂直间距 gx-2 gy-5

顺亿
顺亿
• 👁 0人浏览过
gx-2控制.row内.col间的水平间距，gy-5控制相邻.row间的垂直间距；二者必须加在.row上，因Bootstrap 5依赖.row上声明的CSS变量--bs-gutter-x/y向下透传，加在.col上无效且导致布局偏移。 gx-2 和 gy-5 分别控制什么，为什么不能加在 .col 上 gx-2 控制的是
.row
内所有
.col
之间的**水平间距**，gy-5 控制的是**相邻
.row
之间的垂直间距**。这两个类必须写在
这样的行容器上，加在
.col
或普通
上完全无效。 原因在于 Bootstrap 5 的 gutter 机制依赖 CSS 自定义变量（如
--bs-gutter-x
）驱动，而这些变量只在
.row
上被声明并向下透传给子
.col
。你在
.col
上加
gx-2
，DevTools 里根本看不到任何相关样式生效。 加错位置的典型现象：
.col-6 gx-2
看似“加了间距”，实际只是让该列多了左右
padding
，但
.row
的负外边距没变，导致整行内容右偏、右侧溢出
gx-2
对应默认值
0.5rem
（约 8px），
gy-5
对应
3rem
（48px），数值越大，间隙越宽 如果同时需要水平和垂直 gutter，可直接用
g-2
（等价于
gx-2 gy-2
），但
g-2 g-5
不会叠加——后者会覆盖前者 gx-2 和 gy-5 在响应式场景下怎么组合才不冲突 单独写
gx-2 gy-5
是静态设定，所有断点都生效；想实现“小屏紧凑、大屏拉开”，必须用带断点前缀的组合，比如
gx-0 gx-lg-2 gy-0 gy-xl-5
。 这类写法不是“叠加”，而是按断点优先级覆盖：从
xs
到
xl
，后写的类在对应断点及以上生效，前面的自动失效。 原生Bootstrap旋转木马特效 原生Bootstrap旋转木马特效是一款基于jQuery实现的图片轮播切换代码。 下载 错误写法：
gx-2 gx-md-0
——
md
及以上确实清空了水平 gutter，但
xs/sm
下仍保留
gx-2
，没问题；真正危险的是混用
px-*
类，比如
gx-2 px-md-3
，后者不触发行级 gutter 重置，会导致布局偏移 常见需求示例：
gx-0 gy-2 gx-lg-3 gy-lg-4
表示：移动端无水平间隙 + 行间 0.5rem 垂直距；≥lg 断点起恢复水平 1rem + 垂直 1.5rem 注意断点顺序：Bootstrap 的断点是
xs < sm < md < lg < xl < xxl
，
gx-sm-2
会在 ≥576px 后生效，不会影响更小屏幕 为什么用 gx-2 比手动写 style="padding: 0 0.5rem" 更安全 手动写
style="padding: 0 0.5rem"
或
class="px-2"
只改了单个
.col
的内边距，但没动
.row
的
margin-left: -0.75rem
（默认值）。结果就是列变宽了，行没“拉回来”，整体宽度超限，尤其在
.container-fluid
下容易触发横向滚动条。
gx-2
会同步设置
--bs-gutter-x: 0.5rem
，然后
.row
用这个值重算
margin
，
.col
用它重算
padding
，全程配对 打印或缩放时，手写
px
值可能因 DPI 变化失准；
gx-2
基于
rem
，跟随根字体缩放，更稳定 嵌套
.row
场景下，手写
padding
会让子行的负外边距与父列内边距错位，
gx-*
类会逐层正确继承变量 gy-5 太大导致上下行之间空太多，怎么微调又不破坏对齐
gy-5
对应 3rem（48px），确实容易让多行卡片或表单显得松散。微调关键不是“减小数值”，而是**换断点或换目标**：垂直 gutter 影响的是行与行之间，如果你只想压缩某几行之间的距离，应该把
gy-*
拆到具体
.row
上，而不是全局设在最外层容器。 不要给
.container
加
gy-5
——它不识别这个类，写了也白写 表单场景常见做法：首行标题用
，输入项用
，提交按钮用
，精细控制每段垂直节奏 如果发现某处
gy-5
让内容“掉下去”了，先检查是否漏了
.row
包裹——
gy-*
只对相邻的
.row
生效，两个
.col
直接并列不会产生垂直间隙 最易被忽略的一点：gutter 类只在 Flex 容器上起效，如果你用
display: grid
替代
.row
，那
gx-/gy-
全部失效，得换用
gap
属性。

相关文章