카드 그룹 부트스트랩 vue에서 열을 설정하려면 어떻게 해야 합니까?

카드 그룹 부트스트랩 vue에서 열을 설정하려면 어떻게 해야 합니까?

내 vue 컴포넌트는 다음과 같습니다.

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

스크립트가 실행되면 다음과 같은 결과가 됩니다.

행 1:

행 2:

행 3:

1행과 2행은 예상대로 결과가 나왔습니다.한 행에 4개 열이 있습니다.

하지만 3행은 제 기대와 맞지 않아요.한 행에만 두 열이 있습니다.4개의 열이 있고 2개의 열이 채워져 있으며 2개의 열이 비어 있어야 합니다.

어떻게 하면 이 문제를 해결할 수 있을까요?

CSS를 사용하여 카드의 최대 폭을 설정합니다.

.card-group .card {
    max-width: 25%;
}

데모: https://www.codeply.com/go/DugupIrFxm

카드 덱을 사용하는 경우 홈통 계산 필요...

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

사용하다<b-row>주위에<b-card-group>추가하다class="col-..."카드 그룹으로 이동합니다.이를 통해 다음과 같이 다양한 중단점에 대해 서로 다른 열 수를 지정할 수도 있습니다.class="col-md-6 col-lg-4 col-xl-3"데이터 수집을 위해 코드를 포맷할 필요가 없어집니다.

<template>
  ...
  <b-row>
    <b-card-group class="col-md-3" v-for="club in clubs">
        <b-card :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>
  </b-row>
  ...
</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'}
      ]
    }
  }
}
</script>

언급URL : https://stackoverflow.com/questions/52584241/how-can-i-set-column-in-row-on-the-card-group-bootstrap-vue