Element布局组件el-row和el-col的使用

<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>

<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>

//第1层的el-row表示1行，这行分成24份
//父元素
<el-row>
    <el-col>
        //下面这个el-row是子元素，但是它也是一行，这一行有24份
        <el-row>
            //下面的el-col，这一列，要想占满这行，就是占24份,span要为24才行，记住，el-row表示24份
            <el-col :span="24"></el-col>
        </el-row>
    </el-col>
</el-row>