间隔

Bootstrap 包括各种简写响应式 margin、padding 的通用类别,可用来修改一个元素的外观。

如何运作

赋予一个缩写 class 使 marginpadding 值在一个元素上或其中一个边缘上 (包含响应式)。包含支援单一个边缘属性或全部边缘、垂直边缘、水平边缘上。 Class 来自于 Sass map,范围从 .25rem3rem.

符号

适用于所有断点的间距工具 xsxl,它们没有断点缩写。 这是因为应用了这些类 min-width: 0 并且因此不受媒体查询的约束。 但是,其余断点确实包含断点缩写。

对于 xs,使用固定格式{property}{sides}-{size} 命名这些 Class,对于 sm, md, lg, 和xl。使用格式{property}{sides}-{breakpoint}-{size}

属性 设定:

边缘 设定:

尺寸 设定:

(你也可以对 $spacers Sass 图形变量。)

实例

以下是这些 class 的一些代表性范例:

.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,用于固定宽度盒模型的水平置中,是具有 display: blockwidth 集合的内容,并将水平 margin 设置为 auto.

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