间距

Bootstrap包括各种速记响应边距和填充实用程序类,用于修改元素的外观。

怎么运行的

使用速记类将响应友好的“ margin”或“ padding”值分配给元素或其边的子集。 包括对单个属性,所有属性以及垂直和水平属性的支持。 从默认的Sass映射构建类,范围从.25rem到3rem。

符号

适用于所有断点(从xs到xl)的间距实用程序中都没有断点的缩写。 这是因为这些类从`min-width:0’开始应用,因此不受媒体查询的约束。 但是,其余的断点确实包含断点的缩写。

这些类使用xs的格式{property} {sides}-{size}smmd{property} {sides}-{breakpoint}-{size}来命名。 lg和xl。

其中* property *是以下之一:

  • m - for classes that set margin
  • p - for classes that set padding

其中* sides *是以下之一:

  • t - for classes that set margin-top or padding-top
  • b - for classes that set margin-bottom or padding-bottom
  • l - for classes that set margin-left or padding-left
  • r - for classes that set margin-right or padding-right
  • x - for classes that set both *-left and *-right
  • y - for classes that set both *-top and *-bottom
  • blank - for classes that set a margin or padding on all 4 sides of the element

其中* size *是以下之一:

  • 0 - for classes that eliminate the margin or padding by setting it to 0
  • 1 - (by default) for classes that set the margin or padding to $spacer * .25
  • 2 - (by default) for classes that set the margin or padding to $spacer * .5
  • 3 - (by default) for classes that set the margin or padding to $spacer
  • 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
  • 5 - (by default) for classes that set the margin or padding to $spacer * 3
  • auto - for classes that set the margin to auto

(您可以通过将条目添加到$ spacers Sass映射变量中来添加更多尺寸。)

例子

以下是这些类的一些代表性示例:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

水平居中

另外,Bootstrap还包括一个.mx-auto类,用于通过将水平边距设置为auto来使居中宽度固定宽度的块级内容(即具有display:block和set width的内容居中)。 。

Centered element
<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

负边距

在CSS中,“ margin”属性可以使用负值(“ padding”不能)。 从4.2版开始,我们为上面列出的每个非零整数大小添加了负余量实用程序(例如,“ 1”,“ 2”,“ 3”,“ 4”,“ 5”)。 这些实用程序是自定义跨断点的网格列装订线的理想选择。

语法与默认的正余量实用程序几乎相同,但是在请求的大小之前添加了“ n”。 这是一个与.mt-1相反的示例类:

.mt-n1 {
  margin-top: -0.25rem !important;
}

这是在中等(md)断点及以上自定义Bootstrap网格的示例。 我们增加了.col-md-5的.col填充,然后在父项.row上使用了.mx-md-n5抵消了。

Custom column padding
Custom column padding
<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>