elvui怎么調(diào)整布局？
通過Col組件的:span屬性調(diào)整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屬性來調(diào)整布局之間的寬度
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屬性調(diào)整柵格的偏移位置（每次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屬性調(diào)整排版方式，屬性值分別有
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的響應式，預設(shè)四個尺寸
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屬性。