遍历父 div 子元素并关闭该 div 并打开一个新 div 继续循环答案

【问题标题】：Loop through parent divs children and close that div and open a new div continuing the loop遍历父 div 子元素并关闭该 div 并打开一个新 div 继续循环
【发布时间】：2018-10-16 20:02:27
【问题描述】：

我使用 Bulma 作为我的框架，我注意到当它们达到 12 的数量时，列并没有中断。所以这就是我想要发生的事情：

获取父 div 子元素计数/长度
如果子数大于 3，则关闭 div 并开始一个新的 div
继续执行此操作，直到循环完所有数据

我正在循环一个数组对象以填充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>

【问题讨论】：

标签： javascript vue.js bulma

【解决方案1】：

您需要在 Bulma 中使用 is-multiline 类。然后你不必担心换行，他们会为你处理：

<div class="columns is-multiline">

查看他们的documentation on how it works。

这是一个工作演示：https://codepen.io/egerrard/pen/rqpEEK

【讨论】：

我认为必须有一些东西才能做到这一点。感谢您的帮助，我只是错过了它。就像 a 错过了表格的 is-expanded 哈哈。再次感谢。