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