Element UI ：栅格布局

Posted 2023-03-17

参考技术A 文档地址

<el-row>代表行,里面嵌套<el-col>，

<el-row>里面有 gutter 属性，属性为数字，则 gutter 前面加冒号, gutter 属性代表<el-col>的间隔，默认间隔为0。

<el-col>里面有 span 属性， span 为 x ，则分成 24/x 列（栅格布局一行分为24栏）。

<el-col>里必须有<div>，不然 span 分割无效。

<el-row>使用flex属性，就可以用flex作为对齐方式。

参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。

element-ui 栅格布局 一行五等分

24/5 = 4.8

<el-row :gutter="20" type="flex"  class="wan-row-justify-box">
                <el-col :xs=\'24\' :md="6" :lg="{span: \'4-8\'}" :sm="12"  v-for="(item,index) in tvList" :key="index">
                    <div class="template_con">
                        <div class="template_info">
                            <div class="name">{{item.title}}</div>
                            <div class="label">价格：<div><span>￥{{item.price}}</span> 元</div></div>
                            <div class="btnList">
                                <div class="planBtn" @click="delTemplate(item.id)">删除</div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>

 

 

    .wan-row-justify-box {

        flex-direction: row;

        flex-wrap: wrap;

    }

    
@media screen and (min-width: 1200px) {
        .el-col-md-6 {
            width: 20%;
        }
    }