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 {html的flex布局
flex-direction: row;
flex-wrap: wrap;
}
@media screen and (min-width: 1200px) {
.el-col-md-6 {
width: 20%;
}
}

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。