elementUI gutter不生效解决

256 阅读1分钟
  • gutter其实是设置的el-col子元素的间距
  • 所以不应该在el-col上直接写背景样式,实际上gutter是生效的,只不过我们没观察出来
<el-row :gutter="20" justify="center" align="middle">
  <el-col :span="6"><div class="test-div">1</div></el-col>
  <el-col :span="6"><div class="test-div">2</div></el-col>
  <el-col :span="6"><div class="test-div">3</div></el-col>
  <el-col :span="6"><div class="test-div">4</div></el-col>
</el-row>

<style scoped lang="scss">
  //不应该在el-col上写背景样式
  .el-col {
  }

  .test-div{
    border: 1px solid green;
    border-radius: 4px;
    background-color: gray;
  }
</style>