el-row的gutter失效问题 完整代码在vue中可直接执行
若想gutter间距效果体现出来，需要将css样式，（如：border，background等），添加在el-col的子标签div中的class下才能生效 类名添加在el-col中样式是有了，但是间距确不体现
html代码
<el-row :gutter='20'>
<el-col :span='6'><div class="gutter">132465</div></el-col>
<el-col :span='6'><div class="gutter">132465</div></el-col>
<el-col :span='6'><div class="gutter">132465</div></el-col>
<el-col :span='6'><div class="gutter">132465</div></el-col>
<el-col :span='6'><div class="gutter">132465</div></el-col>
</el-row>
el-row 设置了 gutter 属性时，其父级组件没有留出足够的 padding 来，那么 element 似乎会给添加为负值的 padding-left 和 负值的 padding-right 来进行协调，此时会发现 el-row 被拉长了。
解决方案 给父级容器留出足够的 padding 即可，需要注意容器 box-sizing 是否为 border-box ，确保 padding 属性生效。
.header { box-sizing: border-box;
width: 100%;
height: 60px;
margin-bottom: 5px;
padding: 0 10px; /* 给gutter留padding */
}
