elementui框架中el-row加上了:gutter但是没有效果

一开始的代码如下：

 <el-row :gutter="20" class="app-container-row">
        <el-col :span="6" class="app-container-col"></el-col>
        <el-col :span="9" class="app-container-col"></el-col>
        <el-col :span="9" class="app-container-col"></el-col>
</el-row>

<style>
.app-container-row {
  margin-bottom: 15px;

  .app-container-col {
    background-color: #ffffff;
    height: 300px;
    border-radius: 10px;
  }
}
</style>

查看控制台，可以看出其实已经加上去了，只是没有体现出效果来

解决办法：

若想gutter间距效果体现出来，需要将css样式，（如：border，background等），添加在el-col的子标签div中的class下才能生效。
类名添加在el-col中样式是有了，但是间距效果是不会显示出来的

更改过后的代码如下：

<el-row :gutter="20" class="app-container-row">
        <el-col :span="6">
          <div class="app-container-col"></div>
        </el-col>
        <el-col :span="18">
          <div class="app-container-col"></div>
        </el-col>
</el-row>

<style>
.app-container-row {
  margin-bottom: 15px;

  .app-container-col {
    background-color: #ffffff;
    height: 300px;
    border-radius: 10px;
  }
}
</style>

效果如下，可以看出，间距效果已经出来了