Element-ui Layout 布局
原文链接:https://note.noxussj.top/?source=sifo
布局组件,通过 24 分栏的模式,能够疾速的创立横向布局。就像一块蛋糕切成 24 份,你想给每个人分多少块蛋糕都能够。
按需引入形式
如果是残缺引入可跳过此步骤
import Vue from 'vue'import { Row, Col } from 'element-ui'import 'element-ui/lib/theme-chalk/base.css'import 'element-ui/lib/theme-chalk/row.css'import 'element-ui/lib/theme-chalk/col.css'Vue.use(Row)Vue.use(Col)
根底布局
<template> <el-row> <el-col :span="8"></el-col> <el-col :span="8"></el-col> <el-col :span="8"></el-col> </el-row> <el-row> <el-col :span="6"></el-col> <el-col :span="6"></el-col> <el-col :span="6"></el-col> <el-col :span="6"></el-col> </el-row></template>
分栏距离
<template> <el-row :gutter="20"> <el-col :span="6"></el-col> <el-col :span="6"></el-col> <el-col :span="6"></el-col> <el-col :span="6"></el-col> </el-row></template>
Row Attributes
Col Attributes
原文链接:https://note.noxussj.top/?source=sifo