辅助类

边距

这一系列工具类可以为元素添加 margin 和 padding，默认值都是 8px 的倍数。

类名格式为：.mdui-{属性}-{方向}-{大小}

属性：

• m - 设置 margin
• p - 设置 padding

方向：

• t - 设置 margin-top 或 padding-top
• b - 设置 margin-bottom 或 padding-bottom
• l - 设置 margin-left 或 padding-left
• r - 设置 margin-right 或 padding-right
• x - 设置 margin-leftmargin-right 或 padding-leftpadding-right
• y - 设置 margin-topmargin-bottom 或 padding-toppadding-bottom
• a - 设置 margin 或 padding

大小：

• 0 - 0px
• 1 - 8px
• 2 - 16px
• 3 - 24px
• 4 - 32px
• 5 - 40px

.mdui-m-t-0 {
  margin-top: 0 !important;
}

.mdui-m-l-1 {
  margin-left: 8px !important;
}

.mdui-p-x-2 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.mdui-p-a-5 {
  padding: 40px !important;
}

快速浮动

• .mdui-float-left 使元素向左浮动
• .mdui-float-right 使元素向右浮动

水平居中

为任意元素添加类 .mdui-center 即可使其水平居中。

垂直居中

为任意元素添加类 .mdui-valign，即可使该元素中的子元素垂直居中。

水平对齐方式

• .mdui-text-left 使文本左对齐。
• .mdui-text-center 使文本居中对齐。
• .mdui-text-right 使文本右对齐。

文本大小写转换

• .mdui-text-lowercase 把文本转为小写。
• .mdui-text-uppercase 把文本转为大写。
• .mdui-text-capitalize 把文本转为单词的首字母大写。

文本自动截断

.mdui-text-truncate 可以在文本长度超出限制时，自动截断，并用省略号代替。

清除浮动

为父元素添加 .mdui-clearfix 类可以清除浮动

隐藏内容

• .mdui-hidden 类用于隐藏元素，相当于添加样式 display: none;，隐藏后的元素不占据页面空间。
• .mdui-invisible 类用于使元素不可见，但依然会占据页面上的空间，相当于添加样式 visibility: hidden;。

响应式工具

这些工具类通过媒体查询实现针对不同设备隐藏内容。这些工具类包括：

• .mdui-hidden-*：在指定宽度的设备上隐藏。
• .mdui-hidden-*-up：在指定宽度及以上的设备上隐藏。
• .mdui-hidden-*-down：在指定宽度及以下的设备上隐藏。

调整浏览器窗口、或在不同设备上查看下面的实例。深色部分表示在当前浏览器窗口中是可见的。