天沟
排水沟是列之间的填充,用于响应式空间和对齐 Bootstrap 网格系统中的内容。
他们是如何工作的
-
间距是列内容之间的间隙,由水平创建
padding
。我们在每一列上设置padding-right
和,并在每行的开头和结尾padding-left
使用负数来抵消它以对齐内容。margin
-
排水沟从
1.5rem
(24px
) 宽开始。这使我们能够将网格与填充和边距间隔比例相匹配。 -
可以响应地调整排水沟。使用特定于断点的装订线类来修改水平装订线、垂直装订线和所有装订线。
水平排水沟
.gx-*
类可用于控制水平装订线宽度。如果也使用较大的排水沟以避免不必要的溢出,则可能需要调整.container
or父级,使用匹配的填充实用程序。.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>
另一种解决方案是.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
与水平装订线一样,垂直装订线可能会导致页面末尾下方出现一些溢出。如果发生这种情况,请.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 类也可以添加到行列中。在以下示例中,我们使用响应式行列和响应式装订线类。
<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
. 这会从所有直接子列中删除负数margin
s.row
和水平线。padding
需要边缘到边缘的设计?删除父级.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>
改变排水沟
类是从$gutters
继承自$spacers
Sass 映射的 Sass 映射构建的。
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);