跳到主题内容 跳到文档导航栏

槽(Gutters)

Gutters 列之间的填充,用于在Bootstrap网格系统中相应地分隔和对齐内容。

他们如何工作

  • 列内容之间的间距是由水平padding创建的。我们在每一列上设置padding-rightpadding-left,并在每一行的开始和结束处使用 负margin来偏移该边距以对齐内容。

  • Gutters的宽度为 1.5rem (24px) 。 这使我们能够将网格与 填充和边距分隔符 比例相匹配。

  • Gutters 可以进行相应的调整。使用断点特定的 gutter类修改水平 gutters、垂直 gutters和所有 gutters。

水平 gutters

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

Custom column padding
Custom column padding
<div class="container px-4">
  <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类的周围添加包装器:

Custom column padding
Custom column padding
<div class="container overflow-hidden">
  <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>

垂直 gutters

.gy-*类可用于控制垂直 gutter 宽度。像水平 gutters,垂直 gutters可能会导致 .row 页面末尾的下溢。。如果出现这种情况,请在 .row周围添加一个包装器,其中包含.overflow-hidden 类:

Custom column padding
Custom column padding
Custom column padding
Custom column padding
<div class="container overflow-hidden">
  <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>

水平和垂直 gutters

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

Custom column padding
Custom column padding
Custom column padding
Custom column padding
<div class="container">
  <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>

行列 gutters

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

Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
<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">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>

No gutters

可以使用.g-0删除预定义网格类中列之间的 gutters。 这将删除.row的负margin和所有直接子列的水平padding

需要边到边的设计吗? 删除父项 .container.container-fluid.

实际上,它看起来是这样的。注意:您可以继续将其用于所有其他预定义的网格类(包括列宽、响应层、重排序等)。

.col-sm-6 .col-md-8
.col-6 .col-md-4
<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>

改变 gutters

类是从$guttersSass映射构建的,该映射继承自 $spacersSass映射。

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