Как я могу отобразить список forreach () div на нескольких трех столбцах строки

Question

Я отображаю массив posts:[], который содержит JSON объект.Все хорошо, за исключением того, что я не могу отобразить три столбца подряд с помощью Bootstrap.Хотя я указал в классе = "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>