沟槽

沟槽是列之间的填充，用于在Bootstrap中响应空格和对齐内容。

本页导航↓

工作原理

沟槽是列内容之间的 padding，由水平填充创建。在每一列上设置 padding-right 和 padding-left ，并使用负的 margin 来抵消每行开头和结尾的内容以对齐内容。
排水沟的宽度为 1.5rem（24px)。这使我们能够将网格匹配到padding和margin spacer的比例。
排水沟可以响应调整。使用特定于断点的沟槽类来修改水平沟槽、垂直沟槽和所有沟槽。

水平沟槽

.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">Custom column padding</div>
</div>
<div class="col">
  <div class="p-3 border bg-light">Custom column padding</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">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 :

自定义填充列

<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>

水平和垂直沟槽

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

自定义填充列

<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>

行列沟槽

还可以将Gutter类添加到行列中。在下面的示例中，我们使用响应性行列和响应性gutter类。

行列

<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>

无沟槽

在预定义的网格类的列之间的水槽可以被 .g-0 删除。这将删除 .row 中的 padding ，并删除所有直接子列中的 margin。

不想要两边有空余吗？ 你可以删除父 .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 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,
);