布尔玛-瓷砖不折断下一行

Question

我正在尝试为pintrest类型的布局创建多行磁贴。我遇到的问题是将瓷砖水平放置并离开页面。我需要它们包装到下一行。我似乎在the docs中找不到任何内容：

这是我的代码（从文档中复制）。这些项目将被实用地插入。

<div class="tile is-ancestor">
    <div class="tile is-parent">
      <div class="tile is-child card is-6">
        <p class="title">One</p>
      </div>
      <div class="tile is-child card is-6">
        <p class="title">Two</p>
      </div>
      <div class="tile is-child card is-6">
        <p class="title">Three</p>
      </div>
      <div class="tile is-child card is-6">
        <p class="title">Four</p>
      </div>
    </div>
  </div>

我已经尝试过is-multiline，但似乎没有用。

Answer 1

就我而言，我真的不想用 is-.. 控制列宽。只是想让内容包装起来，所以我这样做了：

<div class="tile is-ancestor is-flex-wrap-wrap">

Answer 2

问题的原因是您为4个元素分配了is-6，导致总共24列，而文档说这是12列网格。因此，它溢出了。

我不认为Tile是解决方案，因为它正在使用flex，而您想要的是能够控制溢出。

解决方案：

1. 只需创建一个div并使用display: inline-block将您的“平铺”显示为列表。给它一个想要的宽度和高度。它将自动将“平铺”推到另一行。
2. 删除is-6，它将所有n个图块显示在同一行中。