间隙（Gutters）

2024-06-23 06:55| 来源: 网络整理| 查看: 265

工作原理

间隙是由水平填充创建的列内容之间的间隙。由水平方向的 padding实现。我们在每一列上设置右边填充和左边填充padding-right and padding-left，并在每一行的开始和结束处使用margin 来偏移该边距以对齐内容。

间隙的宽度为1.5rem（24px）。这允许我们将网格与填充和边距分隔符比例相匹配

间隙可以进行相应的调整。使用断点特定的间隙类修改水平间隙、垂直间隙和所有间隙。

水平间隙

.gx-*类可用于控制水平间隙宽度。如果使用较大的排水沟，则可能需要调整.container或.container流体父级，以避免不必要的溢出，使用匹配的填充实用程序。例如，在下面的示例中，我们使用.px-4增加了填充：

Custom column padding Custom column padding Custom column padding Custom column padding

另一种解决方案是在.overflow隐藏类的.row周围添加包装器：

Custom column padding Custom column padding Custom column padding Custom column padding 垂直间隙

.gy-*类可用于控制垂直间隙宽度。与水平间隙一样，垂直间隙也会导致页面末尾的.行下面出现一些溢出。如果出现这种情况，请在.row周围添加一个包装器，其中包含.overflow隐藏类：

Custom column padding Custom column padding Custom column padding Custom column padding Custom column padding Custom column padding Custom column padding Custom column padding 水平和垂直间隙

.g-*类可用于控制水平间隙宽度，对于以下示例，我们使用较小的间隙宽度，因此不需要添加.overflow隐藏包装类。

Custom column padding Custom column padding Custom column padding Custom column padding Custom column padding Custom column padding Custom column padding Custom column padding 行列间隙

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

Row column Row column Row column Row column Row column Row column Row column Row column Row column Row column Row column Row column Row column Row column Row column Row column Row column Row column Row column Row column 无间隙

可以使用 .g-0删除预定义网格类中列之间的间隙。这将删除.row的margin和所有直接子列的水平填充。

需要边到边的设计吗？放弃 .container or .container-fluid.

实际上，它看起来是这样的。注意：您可以继续将其用于所有其他预定义的网格类（包括列宽、响应层、重排序等）。

.col-sm-6 .col-md-8 .col-6 .col-md-4 .col-sm-6 .col-md-8 .col-6 .col-md-4 改变间隙大小

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

$grid-gutter-width: 1.5rem; $gutters: ( 0: 0, 1: $spacer * .25, 2: $spacer * .5, 3: $spacer, 4: $spacer * 1.5, 5: $spacer * 3, );

【本文地址】

公司简介

联系我们