Bootstrap中GX、GY（Gutters）网格间距不生效问题求助

核心问题：默认无gy-6/gx-6这类内置类 #

Bootstrap 官方默认的间距（包括 gutter 间距）类的数值范围是 0-5，再加上 auto，gy-6、gx-6 不属于框架内置的类，直接使用肯定不会生效。

解决办法分两种情况： #

1. 用现有内置类替代

如果不需要特别大的间距，直接用框架提供的最大默认值 gy-5/gx-5 即可，这是官方预设的最大间距等级。

2. 自定义扩展6级间距

如果你确实需要更大的间距，可以通过两种方式自定义：

• 用 Sass 预编译扩展（适合使用源码的项目）
  修改 Bootstrap 的 $spacers 变量，添加6级对应的数值后重新编译：

  $spacers: (
    0: 0,
    1: $spacer * .25,
    2: $spacer * .5,
    3: $spacer,
    4: $spacer * 1.5,
    5: $spacer * 3,
    6: $spacer * 4 // 这里自定义6级间距的大小，可按需调整
  );
  

• 直接写自定义 CSS（适合用CDN引入Bootstrap的项目）
  自己定义 .gy-6 和 .gx-6 类，覆盖对应的CSS变量：

  .gy-6 {
    --bs-gutter-y: 3rem; /* 垂直间距值，可根据需求修改 */
  }
  .gx-6 {
    --bs-gutter-x: 3rem; /* 水平间距值，可根据需求修改 */
  }
  

3. 检查HTML结构是否正确

确认你的 gutter 类是加在 .row 元素上，而不是 .col 元素上。正确结构示例：

<div class="container">
  <div class="row gy-6 gx-6"> <!-- 类要加在row上 -->
    <div class="col-md-6">内容1</div>
    <div class="col-md-6">内容2</div>
  </div>
</div>

如果把 gy-6 加在 .col 上，完全不会产生 gutter 间距的效果，因为框架的 gutter 机制是通过控制 .row 的内边距和 .col 的负外边距实现的。

内容的提问来源于stack exchange，提问作者Arjen Bos