跳转到主内容
websoft网络软件专家 - 深耕网络技术，打造实用软件！
📁 网站地图

Bootstrap 5 栅格系统行间距 g-y-3 设置方法

陆砚码
陆砚码
• 👁 0人浏览过
gy-*类必须加在.row上才生效，它通过修改--bs-gutter-y变量控制.col上下内边距与.row负外边距配合实现垂直间距，不等于margin-bottom；响应式应写为gy-0 gy-md-2 gy-lg-3。 gy-* 类必须加在 .row 上才生效 直接写
完全没用，DevTools 里连对应 CSS 变量都看不到。Bootstrap 5 的
gy-*
是通过修改
.row
的
--bs-gutter-y
自定义属性来控制行与行之间的垂直间距的，它只对直接子元素为
.col
的
.row
生效。 常见错误包括： 把
gy-3
加在
.col
或普通
上 用在嵌套的
.row
（比如卡片内部的网格）却忘了父容器是否支持 flex 布局 React-Bootstrap 等封装组件未透传
className
到原生
，导致类名被丢弃 gy-3 不等于给 .row 加 margin-bottom
gy-3
控制的是该
.row
内部所有
.col
的上下内边距（
padding-top
/
padding-bottom
），同时配合
.row
自身的负外边距逻辑，确保多行堆叠时列内容垂直对齐、不重叠也不脱节。它不是简单地给
.row
加
margin-bottom: 1rem
——那样会破坏栅格基线，尤其在响应式换行时容易导致错位或溢出。 如果你只是想让两个
.row
之间留空，更安全的做法是： 在上一个
.row
上加
mb-4
（推荐） 用相邻兄弟选择器
.row + .row { margin-top: 1.5rem; }
（需确保不污染嵌套场景） 避免直接改
.row { margin-bottom: ... }
，否则会影响所有嵌套网格 响应式垂直间距怎么写：gy-md-0 gy-lg-3 想实现“小屏无行间空隙、中屏开始有、大屏加大”，就别用
gy-3
单一值硬套。正确写法是叠加响应式类：
gy-0 gy-md-2 gy-lg-3
。Bootstrap 会按断点优先级覆盖：从
lg
（≥992px）起用
3rem
垂直 gutter，
md
（≥768px）起降为
2rem
，其余断点保持清零。 原生Bootstrap旋转木马特效 原生Bootstrap旋转木马特效是一款基于jQuery实现的图片轮播切换代码。 下载 注意：
gy-sm-2
表示从
sm
断点（≥576px）起生效，不是“仅在 sm” 不要混用
g-3
（已废弃）或旧版
no-gutters
，它们在 Bootstrap 5 中无效 自定义断点（如新增
xs
）后，必须同步调用
@include generate-gutter-classes()
，否则
gy-xs-2
根本不会被编译出来 全局改默认垂直 gutter？别手写 CSS 覆盖 如果全站几十个
.row
都要统一设成
gy-2
，一个个加太累，但也不该写
.row { --bs-gutter-y: 0.5rem; }
这种规则——它绕过了 Bootstrap 的工具类机制，无法响应断点变化，且可能被后续加载的 CSS 覆盖。 真正可控的方式只有两种： 用 Sass：改变量
$grid-gutter-width-y: 0.5rem;
，再重新编译整个 Bootstrap（适合设计规范统一的项目） 不用 Sass？那就老实用
gy-2
，它是框架原生支持、可预测、可调试的唯一路径 千万别在
:root
里重设
--bs-gutter-y
后指望
gy-*
类自动适配——这个变量只参与部分工具类计算，并不驱动全部 gutter 行为 最常被忽略的一点：垂直 gutter 的实际视觉效果，往往被内容自身边距干扰（比如

默认带
margin-bottom
）。调
gy-3
前，先检查是不是文本、卡片或表单控件自己撑开了空间。

相关文章