Bulma - 瓷砖不会自动换行到下一行

Question

我正在尝试创建多行瓷砖，以实现类似Pinterest的布局。我遇到的问题是瓷砖是水平放置的，并超出了页面范围。我需要它们换行到下一行。我在文档中找不到任何东西：

这是我的代码（从文档中复制的）。项目将被程序插入。

<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 但它似乎不起作用。

- BugHunterUK

---

你能移除 is-6 吗？它让每个瓦片都在同一行上。 - Sujil Maharjan

另外，您能否更详细地解释一下您正在寻求的最终结果是什么？ - Sujil Maharjan

请显示解决方案 - Richard

Answer 1

在我的情况下，我实际上并不想使用 is-.. 来控制列的宽度。我只是希望内容能够换行，因此我做了这个：

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

- Illia Kuzma

Answer 2

你的问题出在将4个元素分配为is-6，导致总共有24列，而文档中说明它是12列网格，因此会溢出。

我认为Tile不是解决方案，因为它使用flex，而你想要控制溢出。

解决方案：

1.简单地创建一个

，并将您的“tiles”显示为带有display: inline-block的列表。给它一个你想要的宽度和高度。它会自动将“tiles”推到另一行。

2.删除is-6，这将使任意数量的瓷砖在同一行中显示。

- Sujil Maharjan

---

啊，是的，那很有道理。我最终使用了“砖石布局”。 - BugHunterUK