Bootstrap 空间划分

如何工作

在Bootstrap 中我们通过指定一些类属性，来使得我们的padding和margin 属性得到改变，从默认的0.25 rem到3rem。

注意

适用于所有断点(从xs到xl)的间距实用程序中没有断点缩写。这是因为这些类是从min-width: 0及以上应用的，因此不受媒体查询的约束。然而，其余的断点确实包含一个断点缩写。

类使用的格式：
xs： {property}{sides}-{size}
sm, md, lg, 和 xl：{property}{sides}-{breakpoint}-{size}

其中property：

• m：margin
• p：padding

sides属性：

• t 上
• b 下
• l 左
• r 右
• x 左右
• y 上下
• blank 4边

size属性：

• 0 0
• 1 0.25rem
• 2 0.5 rem
• 3 1rem
• 4 1.5rem
• 5 3rem
• auto 自动

水平中心

此外，Bootstrap还包含一个.mx-auto类，用于水平居中固定宽度块级别的内容(即具有display: block和宽度集的内容)，方法是将水平边距设置为auto。

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

负数边距

跟前面相似,只需改变 .mt-1 加上个n 变为 .mt-n1。