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 class="row 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创作工具