本文概述
- 符号
- 水平居中
它的类从默认的Sass映射生成,范围从.25rem到3rem。
符号【bootstrap间距spacing】适用于从xs到xl的所有断点的spacespace实用程序中都没有断点的缩写。这是因为这些类是从min-width:0开始使用的,并且不受媒体查询的约束。但是,其余的断点确实包含断点的缩写。
对于xs,使用{property} {sides- {size}的格式命名,对于sm,md,lg和xl,使用{property} {sides- {breakpoint}-{size}的格式命名。
在此,“财产”是以下之一:
- m-用于设置边距的类
- p-用于设置填充的类
- 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的类。
- 空白-用于在元素的所有4个面上设置边距或填充的类。
- 0-用于通过将其设置为0消除边距或填充的类
- 1-(默认)它用于将边距或填充设置为$ spacer-x * .25或$ spacer-y * .25的类
- 2-(默认情况下)用于将边距或填充设置为$ spacer-x * .5或$ spacer-y * .5的类
- 3-(默认情况下)用于将边距或填充设置为$ spacer-x或$ spacer-y的类
- 4-(默认情况下)用于将边距或填充设置为$ spacer-x * 1.5或$ spacer-y * 1.5的类
- 5-(默认情况下)用于将边距或填充设置为$ spacer-x * 3或$ spacer-y * 3的类
让我们举个例子来看一下这些类的用法:
.mt-0 {
margin-top: 0 !important;
}.ml-1 {
margin-left: ($spacer-x * .25) !important;
}.px-2 {
padding-left: ($spacer-x * .5) !important;
padding-right: ($spacer-x * .5) !important;
}.p-3 {
padding: $spacer-y $spacer-x !important;
}
水平居中Bootstrap还支持.mx-auto类,以使居中固定宽度的块级内容水平居中。通过将水平边距设置为自动来显示内容:块和宽度?
<
div class="mx-auto" style="width: 200px;
">
Centered element
<
/div>
推荐阅读
- bootstrap排版
- bootstrap屏幕阅读器
- bootstrap响应助手
- bootstrap的position用法
- bootstrap invisible内容
- bootstrap图像替换
- bootstrap display属性
- bootstrap的颜色
- bootstrap关闭图标