沟槽是列之间的内边距，用于响应式空间和对齐 Bootstrap 栅格系统中的内容。

水平沟槽

.gx-* 类可用于控制水平边距宽度。如果也使用较大的沟槽以避免不必要的溢出，则可能需要调整 .container 或 .container-fluid 父级，使用匹配的内边距实用程序。例如，在以下示例中，我们使用 .px-4 增加了内边距：

<div class="container px-4">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">自定义列内边距</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">自定义列内边距</div>
    </div>
  </div>
</div>

另一种解决方案是使用 .overflow-hidden 类在 .row 周围添加一个包装器：

<div class="container overflow-hidden">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">自定义列内边距</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">自定义列内边距</div>
    </div>
  </div>
</div>

垂直沟槽

.gy-* 类可用于控制垂直沟槽宽度。与水平沟槽一样，垂直沟槽可能会导致页面末尾的 .row 下方出现一些溢出。如果发生这种情况，请使用 .overflow-hidden 类在 .row 周围添加一个包装器：

<div class="container overflow-hidden">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3 border bg-light">自定义列内边距</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">自定义列内边距</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">自定义列内边距</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">自定义列内边距</div>
    </div>
  </div>
</div>

水平和垂直沟槽

.g-* 类可用于控制水平沟槽宽度，对于以下示例，我们使用较小的沟槽宽度，因此无需添加 .overflow-hidden 包装类。

<div class="container">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3 border bg-light">自定义列内边距</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">自定义列内边距</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">自定义列内边距</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">自定义列内边距</div>
    </div>
  </div>
</div>

行列沟槽

沟槽类也可以添加到行列中。在以下示例中，我们使用响应式行列和响应式沟槽类。

<div class="container">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
      <div class="p-3 border bg-light">行列</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">行列</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">行列</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">行列</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">行列</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">行列</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">行列</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">行列</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">行列</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">行列</div>
    </div>
  </div>
</div>

没有沟槽

我们预定义的网格类中的列之间的沟槽可以使用 .g-0 删除。这将删除 .row 的负边距和所有直接子列的水平内边距。

需要边缘到边缘的设计？删除父 .container 或 .container-fluid 并将 .mx-0 添加到 .row 以防止溢出。

在实践中，它看起来是这样的。请注意，您可以继续将其与所有其他预定义的栅格类（包括列宽、响应层、重新排序等）一起使用。

<div class="row g-0">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>