通过Col组件的:span属性调整Layout布局，分为24栏。
1
2
3
el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
2.分栏间隔
通过Row组件的:gutter属性来调整布局之间的宽度
1
2
3
4
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
3.分栏漂移
通过Col组件的:offset属性调整栅格的偏移位置（每次1格/24格）。
1
2
3
4
<el-row :gutter="20">
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
4.对齐方式
通过Row组件的type="flex"启动flex布局，再通过Row组件的justify属性调整排版方式，属性值分别有
start 居前（默认）
center 居中
end 居后
space-between 分布自适应（两边–中间，两边没有空隙）
around （中间–两边，两边会有空隙）
1
2
3
4
<el-row type="flex" class="row-bg" justify="center">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
5.响应式布局
参考bootstrap的响应式，预设四个尺寸
xs <768px
sm ≥768px
md ≥992
lg ≥1200
1
2
3
4
5
6
<el-row :gutter="10">
<el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
ICON图标
今后可以使用<i>来做图标，给其class添加el-icon-iconName即可。
可以在<button>上添加icon属性。