天沟

排水沟是列之间的填充，用于响应式空间和对齐 Bootstrap 网格系统中的内容。

在本页面

他们是如何工作的

间距是列内容之间的间隙，由水平创建padding。我们在每一列上设置padding-right和，并在每行的开头和结尾padding-left使用负数来抵消它以对齐内容。margin
排水沟从1.5rem( 24px) 宽开始。这使我们能够将网格与填充和边距间隔比例相匹配。
可以响应地调整排水沟。使用特定于断点的装订线类来修改水平装订线、垂直装订线和所有装订线。

水平排水沟

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

自定义列填充

html

<div class="container px-4 text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

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

自定义列填充

html

<div class="container overflow-hidden text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

垂直排水沟

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

自定义列填充

html

<div class="container overflow-hidden text-center">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

水平和垂直排水沟

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

自定义列填充

html

<div class="container text-center">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

行列排水沟

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

行列

html

<div class="container text-center">
  <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">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
  </div>
</div>

没有排水沟

我们预定义的网格类中的列之间的间距可以用.g-0. 这会从所有直接子列中删除负数margins.row和水平线。padding

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

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

.col-sm-6 .col-md-8

.col-6 .col-md-4

html

<div class="row g-0 text-center">
  <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>

改变排水沟

类是从$gutters继承自$spacersSass 映射的 Sass 映射构建的。

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);