Since
0.9.0
Bulma在各个方向提供边距m*和填充p*辅助对象::
*t
for top
*r
for right
*b
for bottom
*l
for left
*x
水平方向 left 和 right
*y
垂直方向 top 和 bottom
您需要将边距/填充前缀与方向后缀相结合。例如::
for a margin-top
, use mt-*
for a padding-bottom
, use pb-*
for both margin-left
and margin-right
, use mx-*
每个属性方向组合都需要附加6个值后缀之一:
Suffix
Value
*-0
0
*-1
0.25rem
*-2
0.5rem
*-3
0.75rem
*-4
1rem
*-5
1.5rem
*-6
3rem
所有间距辅助对象的列表
#
有98个间距辅助对象可供选择:
Property
Shortcut
Classes ↓
Values →
0
0.25rem
0.5rem
0.75rem
1rem
1.5rem
3rem
margin
m
m-0
m-1
m-2
m-3
m-4
m-5
m-6
margin-top
mt
mt-0
mt-1
mt-2
mt-3
mt-4
mt-5
mt-6
margin-right
mr
mr-0
mr-1
mr-2
mr-3
mr-4
mr-5
mr-6
margin-bottom
mb
mb-0
mb-1
mb-2
mb-3
mb-4
mb-5
mb-6
margin-left
ml
ml-0
ml-1
ml-2
ml-3
ml-4
ml-5
ml-6
margin-left
and
margin-right
mx
mx-0
mx-1
mx-2
mx-3
mx-4
mx-5
mx-6
margin-top
and
margin-bottom
my
my-0
my-1
my-2
my-3
my-4
my-5
my-6
padding
p
p-0
p-1
p-2
p-3
p-4
p-5
p-6
padding-top
pt
pt-0
pt-1
pt-2
pt-3
pt-4
pt-5
pt-6
padding-right
pr
pr-0
pr-1
pr-2
pr-3
pr-4
pr-5
pr-6
padding-bottom
pb
pb-0
pb-1
pb-2
pb-3
pb-4
pb-5
pb-6
padding-left
pl
pl-0
pl-1
pl-2
pl-3
pl-4
pl-5
pl-6
padding-left
and
padding-right
px
px-0
px-1
px-2
px-3
px-4
px-5
px-6
padding-top
and
padding-bottom
py
py-0
py-1
py-2
py-3
py-4
py-5
py-6
<!-- Adds 1rem of margin at the bottom -->
<p class= "mb-4" >
Margin bottom
</p>
<!-- Adds 0.25rem of padding on the left and the right -->
<p class= "px-1" >
Horizontal padding
</p>
<!-- Removes the margin on the right and adds 0.75rem padding at the top -->
<p class= "mr-0 pt-3" >
Both
</p>
Copy
Configuration
#
因为每个开发人员都有自己的首选项,为了满足Bulma的定制特性,可以指定自己的类名快捷方式以及间距值。
例如,如果您想要:
margin 缩写为mg
padding 不使用
horizontal 缩写为 h
vertical 也不包括在内
大小仅仅有三个值: "small" : 10px
, "medium" : 30px
, "large" : 60px
您可以通过自定义这些SCSS变量来简化CSS输出:
$spacing-shortcuts : ( "margin" : "mg" );
$spacing-horizontal : "h" ;
$spacing-vertical : null ;
$spacing-values : ( "small" : 10px , "medium" : 30px , "large" : 60px );
Copy
Property
Shortcut
Classes ↓
Values →
10px
30px
60px
margin
mg
mg-small
mg-medium
mg-large
margin-top
mgt
mgt-small
mgt-medium
mgt-large
margin-right
mgr
mgr-small
mgr-medium
mgr-large
margin-bottom
mgb
mgb-small
mgb-medium
mgb-large
margin-left
mgl
mgl-small
mgl-medium
mgl-large
margin-left
and
margin-right
mgh
mgh-small
mgh-medium
mgh-large
通过自定义输出,可以将间距辅助对象的列表从98个缩小到18个。