elementUI的栅格布局el-row代表⾏,⾥⾯嵌套el-col,
el-row⾥⾯有gutter属性,属性为数字,则gutter前⾯加冒号,gutter属性代表el-col的间隔
el-col⾥⾯有span属性,span为x,则分成24/x列
elementui登录界面
el-col⾥必须有div,不然span分割⽆效
例⼦:
<template>
<div>
<el-row :gutter="20">
<el-col :span="6"><div class="test">1</div></el-col>
<el-col :span="6"><div class="test">1</div></el-col>
<el-col :span="6"><div class="test">1</div></el-col>
<el-col :span="6"><div class="test">1</div></el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "HelloWolrd",
data () {
return {
};
}
}
</script>
<style lang="css" scoped>
.test{
background-color: red;
color: #fff;
}
</style>
效果: