沟槽
沟槽是列之间的填充,用于在Bootstrap中响应空格和对齐内容。更新于: 2023-04-30 14:28:21 查看: 469
发布于: 2021-9-9 11:27 发布者: 大米
工作原理
-
沟槽是列内容之间的
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">行列</div>
</div>
<div class="col">
<div class="p-3 border bg-light">行列</div>
</div>
<div class="col">
<div class="p-3 border bg-light">行列</div>
</div>
<div class="col">
<div class="p-3 border bg-light">行列</div>
</div>
<div class="col">
<div class="p-3 border bg-light">行列</div>
</div>
<div class="col">
<div class="p-3 border bg-light">行列</div>
</div>
<div class="col">
<div class="p-3 border bg-light">行列</div>
</div>
<div class="col">
<div class="p-3 border bg-light">行列</div>
</div>
<div class="col">
<div class="p-3 border bg-light">行列</div>
</div>
<div class="col">
<div class="p-3 border bg-light">行列</div>
</div>
</div>
</div>
无沟槽
在预定义的网格类的列之间的水槽可以被 .g-0
删除。这将删除 .row
中的 padding
,并删除所有直接子列中的
margin
。
不想要两边有空余吗? 你可以删除父 .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>