Bulma

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

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

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

解决方案：

只需创建一个 div 并将您的 'tiles' 显示为带有 display: inline-block 的列表。给它一个你想要的宽度和高度。它会自动将 'tiles' 推到另一行。
删除 is-6 这将使您的所有 n 个图块显示在同一行中。

Answer 2

在我的例子中，我真的不想用 is-.. 来控制列宽。只是想包装内容所以我这样做了：

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

Bulma - 瓷砖没有打破到下一行

Bulma - Tiles not breaking onto the next line

css