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