Bootstrap Gutters间距用法 Bootstrap 5中g-,gx-,gy--如何使用

张开发
• 2026/4/21 17:37:03 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

Bootstrap Gutters间距用法 Bootstrap 5中g-,gx-,gy--如何使用
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 的 paddinggx-* 和 gy-* 到底控制谁、在哪生效gx-* 只作用于 .row 元素影响的是该行内所有 .col 之间的**水平间隙**gy-* 同理控制上下行之间的**垂直间隙**。它们不是加在列上而是修改整行的 gutter 行为所以必须写在 div classrow gx-3 这样的地方。值从 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 的负边距导致大屏列整体右偏。 橙篇 百度文库发布的一款综合性AI创作工具

更多文章