Vue的el-rowel-col是Element UI框架中的组件,它们本身没有直接设置间隔的属性。但是可以通过添加样式来实现间隔效果。

可以使用margin属性来设置el-col之间的间隔,例如:

<el-row>
  <el-col :span="6" class="col-with-margin">
    <!-- col content -->
  </el-col>
  <el-col :span="6" class="col-with-margin">
    <!-- col content -->
  </el-col>
  <el-col :span="6" class="col-with-margin">
    <!-- col content -->
  </el-col>
  <el-col :span="6" class="col-with-margin">
    <!-- col content -->
  </el-col>
</el-row>
.col-with-margin {
  margin-right: 10px;
}

如果想要设置el-row之间的间隔,可以在el-row的外层包裹一个容器,并设置容器的样式,例如:

<div class="row-with-margin">
  <el-row>
    <!-- row content -->
  </el-row>
  <el-row>
    <!-- row content -->
  </el-row>
  <el-row>
    <!-- row content -->
  </el-row>
</div>
.row-with-margin {
  margin-bottom: 10px;
}

通过设置上述样式,可以实现el-rowel-col之间的间隔效果

vue的el-row和el-col有设置间隔的属性吗

原文地址: https://www.cveoy.top/t/topic/h21C 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录