在 Bootstrap-vue 中限制卡片组中的卡片数量答案

【问题标题】：Limit the number of cards in cards deck in Bootstrap-vue在 Bootstrap-vue 中限制卡片组中的卡片数量
【发布时间】：2020-07-24 09:09:35
【问题描述】：

我想将每行的卡片数量限制为 4，但卡片不断压缩到每行大约 10 多张卡片。我尝试使用引导容器，但没有成功。

<b-container >
<b-row align-v = "center" order-xl>
<b-card-group deck>
<b-card v-for= "ids in info" v-bind:key="ids"
:title="ids.name"
:img-src="ids.images.xs" 
style="max-width: 20rem;"
min-cols = 3   
>
<b-card-text>
  <h5>

.....
 </h5>
</b-card-text>
</b-card>
</b-card-group >
</b-row>
</b-container>

</div>

【问题讨论】：

标签： vuejs2 bootstrap-vue

【解决方案1】：

你应该为卡片设置一个最小宽度属性：

<b-card v-for= "ids in info" v-bind:key="ids"
:title="ids.name"
:img-src="ids.images.xs" 
style="max-width: 20rem;"
class="mw-25"
min-cols = 3   
>
<b-card-text>
  <h5>

.....
 </h5>
</b-card-text>
</b-card>

mw-25 是一个引导类，将最小宽度设置为 25%。

【讨论】：