Question

我的Vue组件如下：

regsubst()

如果执行脚本，则结果如下

第1行：

第2行：

第3行：

在第1行和第2行中，结果符合我的预期。 1行中有4列

但是第3行与我的期望不符。在1行中只有2列。应该有4列，填充2列，2列为空

我该如何解决这个问题？

Answer 1

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

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

演示：https://www.codeply.com/go/DugupIrFxm

如果您使用卡座，则需要计算装订线...

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

Answer 2

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

如何在卡组引导Vue的行中设置列？

2 个答案: