分栏布局
首先每行使用<el-row>标签标识,然后每行内的列使用<el-col>标识,至于每列整行的宽度比例,则使用:span属性进行设置。
如下代码,即为将1行等分为2列,为了便于区分列,我们为列添加了不同的样式,另外注意<el-divider></el-divider>是分割线,此处用于区分不同的示例。
<template>
<div>
<span>每行24分栏布局</span>
<el-row>
<el-col :span="12" class="lightgreen-box">示例1</el-col>
<el-col :span="12" class="orange-box">示例1</el-col>
</el-row>
<el-divider></el-divider>
</div>
</template>
<style scoped>
.lightgreen-box {
background-color: lightgreen;
height: 24px;
}
.orange-box {
background-color: orange;
height: 24px;
}
</style>
效果如下:
分栏间隔
不同分栏之间设定一定的间隔,可以使用<el-row>标签的:gutter属性,注意默认间隔为0。
此时需要注意的是,下面的写法,间隔是不生效的
<span>分栏间隔 无效</span>
<el-row :gutter="50">
<el-col :span="8" class="lightgreen-box">示例2</el-col>
<el-col :span="8" class="orange-box">示例2</el-col>
<el-col :span="8" class="lightgreen-box">示例2</el-col>
</el-row>
<el-divider></el-divider>
需要在分栏里面新增元素,才能实现分栏间隔,代码修改如下则间隔生效。
<span>分栏间隔 有效</span>
<el-row :gutter="24">
<el-col :span="8">
<div class="lightgreen-box">示例3</div>
</el-col>
<el-col :span="8">
<div class="orange-box">示例3</div>
</el-col>
<el-col :span="8">
<div class="lightgreen-box">示例3</div>
</el-col>
</el-row>
<el-divider></el-divider>
上面两个示例效果如下:
分栏偏移