Bootstrap提供了一系列简写的响应式类,用于调整元素的外边距(margin)、内边距(padding)和间距(spacing),以改变元素的外观。这些通用类别可以根据不同的屏幕尺寸自动调整元素的间距,实现响应式布局。
一、运作方式
赋予一个缩写class使margin或padding值在一个元素上或其中一个边缘上(包含响应式)。包含支持单一个边缘属性或全部边缘、垂直边缘、水平边缘。Class来自于Sass map,范围从.25rem到3rem。
二、符号
如果是适用于所有从xs到xxl断点的间隔通用类别,就不需加入断点缩写。因为从min-width: 0以上开始都将应用这些类别,因此不受media query的约束。但若是针对其余断点,就需要包含断点缩写。
对于xs使用固定格式{property}{sides}-{size}命名,对于sm、md、lg、xl和xxl,使用格式{property}{sides}-{breakpoint}-{size}命名。
property设定:
- m – 设定margin
- p – 设定padding
sides设定:
- t – 设定margin-top或是padding-top
- b – 设定margin-bottom或是padding-bottom
- s – 在LTR设定margin-left或是padding-left,RTL设定margin-right或是padding-right
- e – 在LTR设定margin-right or padding-right,RTL设定margin-left或是padding-left
- x – 同时设定*-left和*-right
- y – 同时设定*-top和*-bottom
- blank – 空白-同时设定margin或padding在元素的四个边缘
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 – 设定margin为auto
(也可以透过将项目增加到$spacers Sass map变数以新增更多尺寸。)
三、示例
以下是这些类的一些代表性示例:
.mt-0 { margin-top: 0 !important; } .ms-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: block、本身设有width的内容),是透过将水平margin设置为auto达成。
<div class="mx-auto" style="width: 200px;"> Centered element </div>
五、负边距
在CSS中,margin属性可以使用负值(padding不能)。这些负值的margin在默认情况下是禁用的,但可以通过在Sass中设置$enable-negative-margins: true以启用。
语法与预设的、正值margin通用类别几乎相同,在所需的大小前加入n,以下为与.mt-1相反的示例:/p>
.mt-n1 { margin-top: -0.25rem !important; }
六、间隙
使用display: grid时,可以在父层的grid容器加上gap通用类别。这可以省去在单个网格线(display: grid容器的子项)上使用margin通用类别。Gap通用类别预设具有响应式,并且根据$spacers Sass map通用类别API产生。
<div class="d-grid gap-3"> <div class="p-2 bg-light border">Grid item 1</div> <div class="p-2 bg-light border">Grid item 2</div> <div class="p-2 bg-light border">Grid item 3</div> </div>
支持包括所有Bootstrap的网格断点中的响应选项,以及来自$spacers map(0–5)六个大小。这里没有.gap-auto通用类别,因为它实际上与.gap-0相同。