解决element-ui库的el-row的gutter=10间距失效问题
作者：半张一块，
这篇文章主要介绍了解决element-ui库的el-row的gutter=10间距失效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
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>
- css代码
.element{
.el-row{
padding: 20px;
.el-col{
margin-bottom: 10px;
.gutter{
border: 1px solid #ccc;
padding: 10px 10px;
}
}
}
}完整代码
<template>
<div class="element">
<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>
</div>
</template><script>
export default {
name: 'Elememt'
};
</script>
<style lang='less' scoped>
.element{
.el-row{
padding: 20px;
.el-col{
margin-bottom: 10px;
.gutter{
border: 1px solid #ccc;
padding: 10px 10px;
}
}
}
}
</style>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。