Gutters

Gutters是列之间的填充物，用于在引导网格系统中相应地分隔和对齐内容。

On this page

工作原理

Gutters 是列内容之间的间隙，由水平“padding”创建我们在每列上设置padding-right和padding-left，并使用负的margin来偏移每行开始和结束处的边距，以对齐内容。
**Gutters 的起始宽度为1.5rem(24px)**这使我们能够将网格与[填充和边距间隔符]padding and margin spacers 比例相匹配。
Gutters 可进行相应调整使用breakpoint-specific gutter类可以修改水平gutter、垂直gutter和所有檐沟。

水平gutters

.gx-*类可用于控制水平gutters宽度。 The .container or .container-fluid parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. 例如，在下面的示例中，我们使用.px-4增加了padding：

Custom column padding

html

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

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

Custom column padding

html

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

垂直gutters

.gy-*类可用于在列换行时控制行内的垂直gutter宽度。与水平gutter一样，垂直gutter 也会在页面末尾的“.row”下方造成一些overflow。如果出现这种情况，请在.overflow-hidden类的.row周围添加一个包装：

Custom column padding

html

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

Horizontal & vertical gutters

使用.g-*类可以控制水平和垂直grid gutters。在下面的示例中，我们使用较小的槽宽度，因此不需要.overflow-hidden包装类。

Custom column padding

html

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

行列gutters

Gutter类也可以添加到行-列.。在下面的示例中，我们使用响应式行列和响应式gutter类。

Row column

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">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
  </div>
</div>

无gutters

在我们预定义的网格类中，列之间的gutters可以用“.g-0”删除。这将删除.row中的负margin和所有直属子列中的水平padding。

Need an edge-to-edge design? 删除父级.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

类是从“$dridgers”Sass Map构建的，该Map继承自“$spacers” Sass Map。

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