间距
间距设置语法如下:
{property}{sides}-{size} // 适用 xs(<=576px)
{property}{sides}-{breakpoint}-{size} // 适用 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) 或 xxl (>=1400px)
breakpoints 指的是屏幕宽度: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) 或 xxl (>=1400px)。
property 代表属性,包含:
m - 用来设置 margin
p - 用来设置 padding
sides 主要指方向:
t - 用来设置 margin-top 或 padding-top
b - 用来设置 margin-bottom 或 padding-bottom
s - 用来设置 margin-left 或 padding-left
e - 用来设置 margin-right 或 padding-right
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
看下部分边距的源码设置:
.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;
}
实例
元素设置居中
设置 margin-top:
颜色: