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

Posted 2021-09-23 笑话如人

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%;
        }
    }