间距辅助(Spacing helpers)

修改面向一个或多个视口宽对的文字型号颜色

Since 0.9.0

Bulma 提供所有方向外边距(margin)m*内边距(padding)p*辅助类:

  • *t顶端(top)
  • *r右侧(right)
  • *b底端(bottom)
  • *l左侧(left)
  • *x 是水平方向(包括 左侧右侧
  • *y 是垂直方向(包括顶端底端

您需要联合使用内边距/外边距和方向的前缀。例如:

  • 对于 margin-top 使用 mt-*
  • 对于 padding-bottom 使用 pb-*
  • 对于 margin-leftmargin-right 使用 mx-*

每次使用这些 property-direction 联合符号时需要附加 6 种值后缀之一:

后缀
*-00
*-10.25rem
*-20.5rem
*-30.75rem
*-41rem
*-51.5rem
*-63rem

所有间距辅助类列表 #

共有 112 种间距辅助类可供选择:

Property Shortcut Classes ↓
Values → 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 and
margin-right
mx mx-0 mx-1 mx-2 mx-3 mx-4 mx-5 mx-6 mx-auto
margin-top and
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 and
padding-right
px px-0 px-1 px-2 px-3 px-4 px-5 px-6 px-auto
padding-top and
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 也有定制的功能,所以您可以自行定制类名简写间距值

例如,如果您想要:

  • margin 简写为 mg
  • padding没有
  • horizontal 简写为 h
  • vertical 也不要了
  • 只有 3 个值:"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);
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

通过定制输出,您已经缩减间距辅助类列表从原来的 112 行到了现在 18 行。

Made with Bulma 此页面为开放源码页面。 发现排版问题?或者表达模糊?
在 GitHub 改进该页内容

#native_company# #native_desc#
#native_cta#

简讯 功能、版本、展柜……实时新闻滚动发布!