如何在多个三列行上显示div的forreach（）列表

Question

我显示一个数组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>

Answer 1

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>

Answer 2

您可以按照以下说明更新代码并检查：

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