如果您使用的是卡片甲板,则需要计算出排水沟... .card-deck .card { max-width: calc(25% - 30px);}My vue component like this : <template> ... <b-card-group deck deck v-for="row in formattedClubs"> <b-card v-for="club in row" :title="club.description" img-src="http://placehold.it/130?text=No-image" img-alt="Img" img-top> <p class="card-text"> {{club.price}} </p> <p class="card-text"> {{club.country}} </p> <div slot="footer"> <b-btn variant="primary" block>Add</b-btn> </div> </b-card> </b-card-group> ...</template><script>export default { data: function () { return { clubs: [ {id:1, description:'chelsea', price:1000, country:'england'}, {id:2, description:'liverpool', price:900, country:'england'}, {id:3, description:'mu', price:800, country:'england'}, {id:4, description:'cit', price:700, country:'england'}, {id:5, description:'arsenal', price:600, country:'england'}, {id:6, description:'tottenham', price:500, country:'england'}, {id:7, description:'juventus', price:400, country:'italy'}, {id:8, description:'madrid', price:300, country:'spain'}, {id:9, description:'barcelona', price:200, country:'spain'}, {id:10, description:'psg', price:100, country:'france'} ] } }, computed: { formattedClubs() { return this.clubs.reduce((c, n, i) => { if (i % 4 === 0) c.push([]); c[c.length - 1].push(n); return c; }, []); } }}</script>If the script executed, the result like thisrow 1 :row 2 :row 3 :In the row 1 and row 2, the results as I expected. In 1 row exist 4 columnBut the row 3 does not match my expectations. In 1 row only 2 column. There should be 4 columns, 2 columns filled, 2 columns is emptyHow can I solve this problem? 解决方案 Use CSS to set a max-width for the cards....card-group .card { max-width: 25%;}Demo: https://www.codeply.com/go/DugupIrFxmIf you're using card-deck you need to calculate for the gutter....card-deck .card { max-width: calc(25% - 30px);} 这篇关于如何在卡组引导Vue的行中设置列?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
08-04 03:39
查看更多