【Element-ui】element-ui中el-row中设置:gutter间隔不生效_element gutter

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>    
1
2
3
4
5
6

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>    
1
2
3
4
5
6

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