Question

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

获取父级divs子项的长度/长度
如果子代数大于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>

Answer 1

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

<div class="columns is-multiline">

查看他们的documentation on how it works。

这是一个有效的演示：https://codepen.io/egerrard/pen/rqpEEK

遍历父div子级并关闭该div并打开一个新的div继续循环

1 个答案: