Bootstrap5 槽宽(Gutters)

半兽人 发表于: 2020-06-29   最后更新时间: 2020-07-04  

槽宽(Gutters)

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

Gutters是如何工作

  • Gutters是列内容之间的间隙,由水平padding创建的。我们在每一列设置padding-rightpadding-left,并在每一行的开头和结尾使用负margin来抵消,以对齐内容。

  • Gutters开始是1.5rem20px)宽。这使我们能够根据padding和margin spacers的比例来匹配我们的网格。

  • Gutters可以响应地调整。使用断点特定的gutter类来修改水平间隔、垂直间隔和所有间隔。

水平间隔

.gx-*类可以用来控制水平间隔宽度。如果使用较大的间隔,可能需要调整.container.container-fluid父类,以避免溢出,使用匹配的padding工具。例如,在下面的例子中,我们用.px-4增加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类的封装器。

<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下面造成一些溢出。如果发生这种情况,你可以使用.overflow-hidden类在.row周围添加一个包装器。

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

在线运行

行列间隔

还可以在行列中添加间隔类。在下面的例子中,我们使用响应的行列和响应的间隔。

<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的负边距和所有子列的水平填充。

需要边到边? 那就删除父级的.container.container-fluid

在实践中,请注意,你可以继续将其用于所有其他预定义的网格类(包括列宽、响应式层、重排序等)。

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

在线运行

改变间隔

是从$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,
);


您需要解锁本帖隐藏内容请: 点击这里
本帖隐藏的内容




上一条: Bootstrap5 网格(Grid)
下一条: Bootstrap5 列(Columns)