间距辅助工具
更改一个或多个视口宽度的文本大小和颜色
Bulma 提供了所有方向的边距m*和内边距p*辅助工具
*t表示顶部*r表示右侧*b表示底部*l表示左侧*x表示左侧和右侧的水平方向
*y表示顶部和底部的垂直方向
你需要组合边距/内边距前缀和方向后缀。例如
margin-top，使用mt-*padding-bottom，使用pb-*margin-left和margin-right，使用mx-*
这些 property-direction 组合中的每一个都需要附加 6 个值后缀中的一个
| 后缀 | 值 |
|---|---|
*-0 |
0 |
*-1 |
0.25rem |
*-2 |
0.5rem |
*-3 |
0.75rem |
*-4 |
1rem |
*-5 |
1.5rem |
*-6 |
3rem |
有 112 个间距辅助工具可供选择
| 属性 | 快捷方式 | 类 ↓ | |||||||
|---|---|---|---|---|---|---|---|---|---|
| 值 → | 0 |
0.25rem |
0.5rem |
0.75rem |
1rem |
1.5rem |
3rem |
auto |
|
margin |
m |
m-0 |
m-1 |
m-2 |
m-3 |
m-4 |
m-5 |
m-6 |
m-auto |
margin-top |
mt |
mt-0 |
mt-1 |
mt-2 |
mt-3 |
mt-4 |
mt-5 |
mt-6 |
mt-auto |
margin-right |
mr |
mr-0 |
mr-1 |
mr-2 |
mr-3 |
mr-4 |
mr-5 |
mr-6 |
mr-auto |
margin-bottom |
mb |
mb-0 |
mb-1 |
mb-2 |
mb-3 |
mb-4 |
mb-5 |
mb-6 |
mb-auto |
margin-left |
ml |
ml-0 |
ml-1 |
ml-2 |
ml-3 |
ml-4 |
ml-5 |
ml-6 |
ml-auto |
margin-left 和 margin-right
|
mx |
mx-0 |
mx-1 |
mx-2 |
mx-3 |
mx-4 |
mx-5 |
mx-6 |
mx-auto |
margin-top 和 margin-bottom
|
my |
my-0 |
my-1 |
my-2 |
my-3 |
my-4 |
my-5 |
my-6 |
my-auto |
padding |
p |
p-0 |
p-1 |
p-2 |
p-3 |
p-4 |
p-5 |
p-6 |
p-auto |
padding-top |
pt |
pt-0 |
pt-1 |
pt-2 |
pt-3 |
pt-4 |
pt-5 |
pt-6 |
pt-auto |
padding-right |
pr |
pr-0 |
pr-1 |
pr-2 |
pr-3 |
pr-4 |
pr-5 |
pr-6 |
pr-auto |
padding-bottom |
pb |
pb-0 |
pb-1 |
pb-2 |
pb-3 |
pb-4 |
pb-5 |
pb-6 |
pb-auto |
padding-left |
pl |
pl-0 |
pl-1 |
pl-2 |
pl-3 |
pl-4 |
pl-5 |
pl-6 |
pl-auto |
padding-left 和 padding-right
|
px |
px-0 |
px-1 |
px-2 |
px-3 |
px-4 |
px-5 |
px-6 |
px-auto |
padding-top 和 padding-bottom
|
py |
py-0 |
py-1 |
py-2 |
py-3 |
py-4 |
py-5 |
py-6 |
py-auto |
要使用这些类，只需将它们附加到任何 HTML 元素即可
<!-- 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>由于每个开发人员都有自己的偏好，并且为了满足 Bulma 的自定义功能，因此可以指定自己的类名快捷方式以及间距值。
例如，如果您希望
mgh10px 的 “small”、30px 的 “medium” 和 60px 的 “large”
您可以通过自定义这些SCSS 变量来简化 CSS 输出
$spacing-shortcuts: ("margin": "mg"); $spacing-horizontal:
"h"; $spacing-vertical: null; $spacing-values: ("small": 10px, "medium": 30px,
"large": 60px); | 属性 | 快捷方式 | 类 ↓ | |||||||
|---|---|---|---|---|---|---|---|---|---|
| 值 → | 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 和 margin-right
|
mgh |
mgh-small |
mgh-medium |
mgh-large |
|||||
通过自定义输出，您已将间距帮助器的列表从 112 缩小到仅18。