如何在卡组引导 vue 上设置行中的列?

How can I set column in row on the card group bootstrap vue?(如何在卡组引导 vue 上设置行中的列?)

本文介绍了如何在卡组引导 vue 上设置行中的列?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的 vue 组件是这样的:

<模板>...<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-顶部><p class="卡片文本">{{club.price}}</p><p class="卡片文本">{{club.country}}</p><div slot="页脚"><b-btn variant="primary" 块>添加</b-btn></div></b卡></b-card-group>...</模板><脚本>导出默认{数据:函数(){返回 {俱乐部:[{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,描述:'尤文图斯',价格:400,国家:'意大利'},{id:8,描述:'马德里',价格:300,国家:'西班牙'},{id:9,描述:'巴塞罗那',价格:200,国家:'西班牙'},{id:10,描述:'psg',价格:100,国家:'法国'}]}},计算:{格式化俱乐部(){返回 this.clubs.reduce((c, n, i) => {if (i % 4 === 0) c.push([]);c[c.length - 1].push(n);返回 c;}, []);}}}</脚本>

如果脚本执行,结果是这样的

第 1 行:

第 2 行:

第 3 行:

在第 1 行和第 2 行,结果和我预期的一样.1行有4列

但是第 3 行不符合我的预期.在 1 行中只有 2 列.应该有4列,2列填满,2列是空的

我该如何解决这个问题?

解决方案

使用 CSS 设置卡片的最大宽度...

.card-group .card {最大宽度:25%;}

演示:https://www.codeply.com/go/DugupIrFxmp>

如果您使用的是卡片组,则需要计算排水沟...

.card-deck .card {最大宽度:计算(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 this

row 1 :

row 2 :

row 3 :

In the row 1 and row 2, the results as I expected. In 1 row exist 4 column

But 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 empty

How 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/DugupIrFxm

If you're using card-deck you need to calculate for the gutter...

.card-deck .card {
    max-width: calc(25% - 30px);
}

这篇关于如何在卡组引导 vue 上设置行中的列?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:如何在卡组引导 vue 上设置行中的列?

基础教程推荐