如何使用 Bulma CSS 使瓷砖包裹起来答案

【问题标题】：How to make tiles wrap with Bulma CSS如何使用 Bulma CSS 使瓷砖包裹起来
【发布时间】：2017-08-13 09:16:02
【问题描述】：

我正在使用带有 Rails 应用程序的 Bulma CSS 框架。我有一个很长的项目列表，并希望将它们显示在图块中。但是，图块会从屏幕上消失，而不是换到下一行。

Bulma Documentation 没有解决这个问题。由于我是从可变长度列表动态创建图块，因此在他们的文档中描述的显式嵌套并不是那么容易，我宁愿让它干净地换行到下一行。

我的代码基本上是这样的：

<div class="tile is-ancestor">
  <div class="tile is-parent">
    <% @my_list.each do |item| %>
        <div class="tile is-child box">
          <p><%= item %></p>
        </div>
    <% end %>
  </div>
</div>

由于 Bulma 是基于 flexbox，我认为有一些等效于 flex-wrap: wrap;，但我还没有找到这个选项。

更新：可以将styleflex-wrap: wrap;添加到父容器中，但是是否有Bulma集成的类标志？

【问题讨论】：

我只是偶然发现了这个确切的问题，您将 flex wrap 应用于父容器的解决方案对我有用。我认为您应该将其作为答案并接受它。我浏览了文档，找不到任何类标志。
Hei @MForMarlon，感谢您查看更多信息和评论。好的，我可以做到:)

标签： css flexbox bulma

【解决方案1】：

目前 Bulma 中似乎没有直接解决此问题的类标志。

但是，由于 Bulma 是基于 flexbox 的，因此可以将样式 flex-wrap: wrap; 添加到父容器中以达到预期的效果。

【讨论】：

【解决方案2】：

对于网格系统，Bulma 确实为此提供了一个类。

如果您将is-multiline 添加到您的.columns 元素，它应该会自动换行。（在引擎盖下添加flex-wrap: wrap;）

来源：Bulma column docs

（不确定这如何应用于图块，但您总是可以将它们包装成列）

【讨论】：

【解决方案3】：

DevTools 检查器显示 Bulma 的 box p 的默认样式为 white-space: nowrap。

将style="white-space: normal!important;" 直接应用到<p> 标签会强制它正常换行并为我解决了问题。

【讨论】：