博客

1. 问题描述

在使用element-ui时，采用布局中的

el-row

与

el-col

，想要将

el-col之间

设置间隔，在

el-row

中

添加属性:gutter

，发现并

没有间隔

出现

2. 问题代码

<el-row :gutter="20">
        <el-col :span="12" style="border:1px solid #000">第一部分
        </el-col>
        <el-col :span="12" style="border:1px solid #000">第二部分
        </el-col>
</el-row>    

3. 解决方法

后面发现是因为在el-col中设置了style样式，才导致gutter的间距样式不起作用。 所以如果想设置样式的话就直接加个class形式

<el-row :gutter="20">
        <el-col :span="12" class="col_style">第一部分
        </el-col>
        <el-col :span="12" class="col_style">第二部分
        </el-col>
</el-row>    

<style>
 .col_style {
 	style="border:1px solid #000"
 	}
</style>