Bootstrap包括广泛的速记响应边距和填充实用程序类来修改元素的外观。
1、作用原理
使用速记类为元素或其边的子集分配响应友好的边距或填充值。包括对单个属性、所有属性以及垂直和水平属性的支持。类从默认的Sass map构建，范围从.25rem到3rem。
2、标注
应用于所有断点(从xs到xl)的间距实用程序中没有断点缩写。这是因为这些类是从min-width: 0及以上应用的，因此不受媒体查询的约束。然而，其余的断点都包含一个断点缩写。
类的命名格式为:xs为{property}{sides}-{size}， sm、md、lg和xl为{property}{sides}-{breakpoint}-{size}。
property 是下面其中之一：
- m -用于设置边距的类
- p -用于设置填充的类
sides 是下面其中之一
- t -类组margin-top或padding-top
- b -类设置margin-bottom或padding-bottom
- l -类组margin-left或padding-left
- r -类margin-right或padding-right
- x -类集合
*-left和*-right - y -类组
*-top和*-bottom设置一个 - blank——类在元素的所有4个边的边距或填充
size 是下面其中之一
- 0 -类消除
margin或padding通过它设置为0； - 1 -(默认情况下)类设置
margin或padding为$spacer * .25 - 2 -(默认情况下)类设置
margin或padding为$spacer * .5 - 3 -(默认情况下)类,设置
margin或padding为$spacer - 4 -(默认情况下)类设置
margin或padding为$spacer * 1.5 - 5 -(默认情况下)类设置
margin或padding为$spacer * 3 - auto-对于将边界设置为auto的类
(您可以通过向$spacers Sass映射变量添加条目来添加更多的大小。)
3、示例
下面是这些类的一些代表性示例
.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;
}
4、水平居中
另外，Bootstrap还包括一个.mx-auto类，用于水平中心固定宽度的块级别内容，即具有display: block和通过设置水平边距为auto设置宽度的内容。
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
5、负margin
在CSS中，边距属性可以使用负值(填充不能)。在4.2中，我们为上面列出的每个非零整数大小添加了负边界实用程序(例如，1、2、3、4、5)。这些实用程序对于定制跨越断点的网格列水槽非常理想。
语法几乎与默认的正边距实用程序相同，但在请求的大小之前增加了n。下面是一个与.mt-1相反的示例类
.mt-n1 {
margin-top: -0.25rem !important;
}
下面是一个在介质(md)断点及以上自定义Bootstrap网格的例子。我们用.px-md-5增加了.col填充，然后在父行上用.mx-md-n5抵消。
<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>
后记
如果你感觉文章不咋地
//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！
