间距(Spacing)

方便设置容器的margin 和 padding,调整容器的间距和缝隙。

Since 0.9.0

Bulma在各个方向提供边距m*和填充p*辅助对象::

  • *t for top
  • *r for right
  • *b for bottom
  • *l for left
  • *x 水平方向 leftright
  • *y 垂直方向 topbottom

您需要将边距/填充前缀与方向后缀相结合。例如::

  • for a margin-top, use mt-*
  • for a padding-bottom, use pb-*
  • for both margin-left and margin-right, use mx-*

每个属性方向组合都需要附加6个值后缀之一:

Suffix Value
*-00
*-10.25rem
*-20.5rem
*-30.75rem
*-41rem
*-51.5rem
*-63rem

所有间距辅助对象的列表 #

有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

要使用这些类,只需将它们附加到任何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>

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);
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个。

返回头部

问题反馈
返回顶部