如何在Bootstrap网格中创建v-for循环

Question

我有一组JavaScript对象，必须放在cols中，每个col一个。我制作了一个网格，当我只使用HTML和CSS时，它没有任何问题。现在我开始使用Vue，cols一个接一个地出现，而不是像它们应该出现的那样并排出现(它们以前也出现过(。

这就是我现在所拥有的。

<div id="app">
<div class="col-3">
<div v-for="product in products" class="producte">
<div class="imgdesc">
<img :src="product.urlimg" class="img-fluid"><br>
{{ product.desc }}<br>
</div>
<img v-if="product.cartell === 'new'" src="imgs/sign_new_offer.png" class="cartell">
<img v-if="product.cartell === 'offer'" src="imgs/sign_offer.png" class="cartell">
</div>
</div>
</div>
</div>

我唯一的问题是，它们一个接一个地出现，而且必须并排在电脑上(这是一个响应式网站(。我不知道怎样才能把它做好。

Answer 1

尝试将显示作为类'col-3'的flex

<div id="app">
<div class="col-3" style="display: flex;">
<div v-for="product in products" class="producte">
<div class="imgdesc">
<img :src="product.urlimg" class="img-fluid"><br>
{{ product.desc }}<br>
</div>
<img v-if="product.cartell === 'new'" src="imgs/sign_new_offer.png" class="cartell">
<img v-if="product.cartell === 'offer'" src="imgs/sign_offer.png" class="cartell">
</div>
</div>
</div>

另外请注意，您为div[]添加了一个额外的结束标记，该标记必须删除

Answer 2

使用col-x类时应使用v-for指令：

<div id="app" class="row">
<div class="col-3" v-for="product in products" >
<div class="producte">
<div class="imgdesc">
<img :src="product.urlimg" class="img-fluid"><br>
{{ product.desc }}<br>
</div>
<img v-if="product.cartell === 'new'" src="imgs/sign_new_offer.png" class="cartell">
<img v-if="product.cartell === 'offer'" src="imgs/sign_offer.png" class="cartell">
</div>
</div>
</div>
</div>