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

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

我有一组 JavaScript 对象，我必须将它们放入 cols 中，每个 col 一个。我制作了一个网格，当我只使用 HTML 和 CSS 时，它没有出现任何问题。现在我开始使用 Vue 来这样做，列出现在另一个之下，而不是并排出现（它们之前出现过）。

这就是我现在所拥有的。

isAlive.check() 

我唯一的问题是它们一个下一个出现并且它们必须并排在计算机上（这是一个响应式网站）。我不知道如何才能做到正确。

解决方法

尝试将“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 [] 添加了一个额外的结束标记，必须将其删除

,

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

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