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

 

posted @ 2021-09-23 09:54  番茄西红柿u  阅读(3535)  评论(0编辑  收藏  举报