如何在多个三列行上显示一个 foreach() div 列表答案

【问题标题】：How can I display a forreach() list of div on multiple three columns row如何在多个三列行上显示一个 foreach() div 列表
【发布时间】：2019-09-21 16:33:12
【问题描述】：

我显示了一个数组posts:[]，其中包含一个JSON 对象。一切都很好，只是我不能用 Bootstrap 连续显示三列。即使我在 class="col-4" 中指定。这是我的代码。

    <div class="" v-for="post of posts">
        <div class="col-12 col-lg-4">
        <router-link :to="'panneau/' + post['id_panneau']">
       "...."   
        </router-link>
        </div>
    </div>

【问题讨论】：

能否请您发布该问题的屏幕截图。顺便说一句，您需要将 row 类添加到包含列的父 div。
我添加了您要求的屏幕截图。我知道我需要放置一行，但我不知道在哪里放置。

标签： vue.js bootstrap-4

【解决方案1】：

您可以如下所示更新您的代码并检查：

<div class="row">
   <div class="col-12 col-lg-4" v-for="post of posts">
      <router-link :to="'panneau/' + post['id_panneau']">
         "...."   
      </router-link>
   </div>
</div>

【讨论】：

【解决方案2】：

v-for="..." 属性必须在要循环的元素中。在这种情况下，您循环的是第一个 div 而不是带有 col-* 类的那个。尝试删除第二个 div 并将这些类添加到第一个。

<div  class="col-12 col-lg-4" v-for="post of posts">
    <router-link :to="'panneau/' + post['id_panneau']">
      "...."   
    </router-link>
</div>

【讨论】：