Перейдите к родительскому элементу div для потомков, закройте его и откройте новый блок, продолжая цикл

Question

Я использую Bulma в качестве каркаса и заметил, что столбцы не ломаются, когда достигают счетчика 12. Так вот, что я хочу, чтобы это произошло:

1. Получить родительские divчисло детей / длина
2. Если число детей больше 3, закройте div и запустите новый div
3. Продолжайте делать это, пока все данные не будут зациклены на

Я зацикливаюсь на объекте массива, чтобы заполнить информацию для column is-4

Пример

<div class="columns">
  <div class="column is-4"></div>
  <div class="column is-4"></div>
  <div class="column is-4"></div> <--- 3rd child
</div> <--- close the div
<div class="columns"> <--- start new parent div
  <div class="column is-4"></div> <--- continue looping through the content
  <div class="column is-4"></div>
  <div class="column is-4"></div>
</div>

Код Vue

<template>
  <div class="container">
    <div class="columns">
      <div v-for="(coffee, i) in collection" :key="i" class="column is-4">
        <div class="card">
          <div class="card-content">
            <h2 class="title">{{ coffee.title }}</h2>
          </div>
          <footer class="card-footer">
            <router-link :to="{ path: '/collections/' + coffee.urlTitle }" class="card-footer-item">View Details</router-link>
            <p class="card-footer-item">
              From ${{ coffee.size.twelveOz }}
            </p>
          </footer>
        </div>
      </div>
    </div>
  </div>
</template>

Answer 1

Вам необходимо использовать класс is-multiline, встроенный в Bulma.Тогда вам не нужно беспокоиться о переносе строк, они позаботятся об этом за вас:

<div class="columns is-multiline">

Ознакомьтесь с их документацией о том, как это работает .

И вот рабочая демоверсия: https://codepen.io/egerrard/pen/rqpEEK