更新你的布局而无需创建新的类，间距助手类对于修改元素的 padding 和 margin 都非常有用。
使用 playground 来了解不同的助手类能够做些什么。 关于他们是如何工作的，请参阅下面 How it works 部分。
将 margin 或者 padding 应用于一个元素，范围在 0 到 12 之间。每个尺寸增量都设计成与常用 Material Design 间距对齐。这些类可以使用 {property}{direction}-{size} 这个格式来应用。
占位符 property 用来设置间距的类型：
m- 对应marginp- 对应padding
占位符 direction 指定属性所应用到的方向：
t- 应用margin-top和padding-top的间距。b- 应用margin-bottom和padding-bottom的间距。l- 适用margin-left和padding-left的间距。r- 应用margin-right和padding-right的间距。s- 应用margin-left/padding-left(LTR mode) 和margin-right/padding-right(RTL mode)e- 应用margin-right/padding-right(LTR model) 和margin-left/padding-left(RTL model)x- 同时对应*-left和*-right属性y- 同时对应*-top和*-bottom属性a- 在所有方向应用该属性的间距。
size 控制在 4px 间隔中的属性增量：
0- 消除所有margin或者padding并设置为01- 设置margin或者padding到 4px2- 设置margin或者padding到 8px3- 设置margin或者padding到 12px4- 设置margin或者padding到 16px5- 设置margin或者padding到 20px6- 设置margin或者padding到 24px7- 设置margin或者padding到 28px8- 设置margin或者padding到 32px9- 设置margin或者padding到 36px10- 设置margin或者padding到 40px11- 设置margin或者padding到 44px12- 设置margin或者padding到 48pxn1- 将负的margin设置到 4pxn2- 将负的margin设置到 8pxn3- 将负的margin设置到 12pxn4- 将负的margin设置到 16pxn5- 将负的margin设置到 20pxn6- 将负的margin设置到 24pxn7- 将负的margin设置到 28pxn8- 将负的margin设置到 32pxn9- 将负的margin设置到 36pxn10- 将负的margin设置到 40pxn11- 将负的margin设置到 44pxn12- 将负的margin设置到 48pxauto- 设置边距为auto
Vuetify 有一个使用 Flexbox 构建的 12 格栅格系统。空格用于创建应用程序内容中的特定布局。 它由 5 个用于针对特定屏幕大小或方向的介质断点组成：xs, sm, md, lg 和 xl。 默认分辨率定义在 Viewport Breakpoints 表中，可以通过 breakpoint service config 进行修改。
| Device | Code | Types | Range |
|---|---|---|---|
| Extra small | xs | small to large handset | < 600px |
| Small | sm | small to medium tablet | 600px > < 960px |
| Medium | md | large tablet to laptop | 960px > < 1264px* |
| Large | lg | desktop | 1264px* > < 1904px* |
| Extra large | xl | 4k and ultra-wides | > 1904px* |
| * -16px on Desktop | |||
辅助类在给定的断点处应用 margin 或 padding。这些类可以使用以下格式应用。{property}{direction}-{breakpoint}-{size}。这并不适用于 xs，因为它是推断出来的；例如，ma-xs-2 等于 ma-2。
Caught a mistake or want to contribute to the documentation?
Edit Layout
on GitHub!