The problem of setting in el-row in element-ui: gutter interval does not take effect

Setting in el-row: gutter interval does not take effect

Problem description

When using element-ui, use theel-rowandel-col，

Want toBetween el-colSet intervals,

existel-rowmiddleAdd attribute:gutter, found that there was no interval

Problem code

&lt;el-row :gutter="20"&gt;
        &lt;el-col :span="12" style="border:1px solid #000">Part 1        &lt;/el-col&gt;
        &lt;el-col :span="12" style="border:1px solid #000">Part 2        &lt;/el-col&gt;
&lt;/el-row&gt;

Solution

Later I found that it was because the style style was set in el-col, which caused the spacing style of gutter to not work.

So if you want to set the style, just add a class form

&lt;el-row :gutter="20"&gt;
        &lt;el-col :span="12" class="col_style"&gt;Part One
        &lt;/el-col&gt;
        &lt;el-col :span="12" class="col_style"&gt;Part 2
        &lt;/el-col&gt;
&lt;/el-row&gt;

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

The gutter=10 spacing of the element-ui library is invalid

The complete code can be executed directly in vue

If you want to reflect the gutter spacing effect, you need to add the css style (such as border, background, etc.) to the class in the sub-label div of el-col to take effect.

The class name is added to el-col, but the spacing is not reflected

html code

<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 code

.element{
  .el-row{
    padding: 20px;
    .el-col{
      margin-bottom: 10px;
      .gutter{
        border: 1px solid #ccc;
        padding: 10px 10px;
      }
    }
  }
}

Complete code

<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>

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.