循环 parent divs children 并关闭 div 并打开一个新的 div 继续循环

Question

我使用 Bulma 作为我的框架，我注意到列数达到 12 时不会中断。这就是我想要发生的事情：

得到parent divs children count/length
如果 child 计数大于 3，则关闭 div 并开始新的 div
继续执行此操作，直到循环遍历所有数据

我在数组 object 上循环以填充 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 class 构建 Bulma。那么您就不必担心换行，他们会为您处理：

<div class="columns is-multiline">

查看他们的 documentation on how it works。

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

循环 parent divs children 并关闭 div 并打开一个新的 div 继续循环

Loop through parent divs children and close that div and open a new div continuing the loop

javascript

vue.js

bulma