关于前端:Elementui-Layout-布局

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