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

【问题标题】：Bulma - Tiles not breaking onto the next lineBulma - 瓷砖没有打破到下一行
【发布时间】：2018-09-01 15:05:02
【问题描述】：

我正在尝试为 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，但它似乎不起作用。

【问题讨论】：

你能删除 is-6 吗？它使每个瓷砖都在同一条线上。
另外，您能否进一步解释一下您所寻求的最终结果是什么？
请给出解决方案

标签： css bulma

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

解决办法：

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

【讨论】：

啊，是的，这是有道理的。我最终使用了masonry-layout。