vue的el-row和el-col有设置间隔的属性吗
Vue的el-row和el-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-row和el-col之间的间隔效果
原文地址: https://www.cveoy.top/t/topic/h21C 著作权归作者所有。请勿转载和采集!