<el-row><el-col

ElementUI之Layout布局

基础布局

整个宽度分为24份，通过span属性来定义元素的宽度占多少

  <el-row> <el-col :span="12"><div class="grid-content bg-purple-dark"></div></el-col> <el-col :span="12"><div class="grid-content bg-purple-dark"></div></el-col> </el-row>

分栏间隔

通过row组件提供的gutter属性来指定每一栏之间的间隔，默认间隔为0

  <el-row :gutter="20"> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> </el-row>

混合布局

通过基础的1/24分栏任意扩展组合形成为复杂的混合布局

<el-row :gutter="20"> <el-col :span="16"><div class="grid-content bg-purple"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> </el-row> <el-row :gutter="20"> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> </el-row> <

转载于:https://www.cnblogs.com/wcss/p/11002606.html