槽宽 · Bootstrap 6.0 中文文档

它们是如何工作的

沟槽是列内容之间的间隙，由水平 padding 创建。 我们在每一列上设置 padding-right 和 padding-left，并在每行的开始和结束使用负的 margin 来抵消，以对齐内容。
沟槽的起始宽度为 1.5rem (24px)。 这使我们能够将网格与 margin 和 padding 工具的刻度匹配。
沟槽可以响应式调整。 使用特定断点的沟槽类来修改水平沟槽、垂直沟槽和所有沟槽。

水平间隙

.gx-* 类可用于控制水平间距宽度。如果使用了更大的间距，可能还需要调整 .container 或 .container-fluid 父元素，以避免不需要的溢出，可以使用匹配的内边距工具类。例如，在下面的示例中，我们使用 .px-4 增加了内边距：

自定义列填充

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 类的包装器：

自定义列填充

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>

垂直间隙

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

水平和垂直间隙

使用 .g-* 类来控制水平和垂直网格间距。在下面的例子中，我们使用了较小的间距宽度，因此不需要 .overflow-hidden 包装类。

自定义列填充

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>

行列间距

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

行列

HTML

<div class="container text-center">
  <div class="row row-cols-2 lg:row-cols-5 g-2 lg:g-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>

无间隙

我们预定义网格类中列之间的间隙可以通过以下方式去除 .g-0. 这会去除负面影响 margin来自 .row 以及水平 padding 来自所有直接子列。

需要全屏设计吗？ 放下父母 .container 或 .container-fluid 并添加 .mx-0 到 .row 防止溢出。

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

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

.col-6 .md:col-4

HTML

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

更改沟槽

类是从$gutters Sass map构建的，该映射继承自$spacers Sass map。

SCSS

          $grid-gutter-x: 1.5rem;
$gutters: $spacers;