Layout布局
el-row属性简介
el-row 组件 提供 gutter 属性来指定每一栏之间的间隔,默认间隔为 0。
提醒: el-row :gutter需要与el-col :span 一起使用才能生效
el-col属性简介
el-col的span属性 默认值为24,表示每一行共24份,:spn的值即为每一列占据整行的比例
示例效果图
示例代码
<el-row :gutter="10"><!-- 表示一行内的单个小列之间的间距为10px。相当于设置外边距 margin -->
<el-col :span="8">
<!-- el-col的span属性 默认值为24, 8/24 即此div显示宽度为1/3 -->
<div class="grid-content bg-purple-dark"></div>
</el-col>
<el-col :span="16">
<!-- 16/24 即此div显示宽度为2/3 -->
<div class="grid-content bg-purple-dark"></div>
</el-col>
</el-row>