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>

 

有描述不清楚的可私信问我，大家一起研究讨论，

---------------------
作者：半张一块，
来源：CSDN
原文：https://blog.csdn.net/weixin_43858540/article/details/108747671
版权声明：本文为半张一块，原创文章，转载请附上博文链接！