如何使用Bulma CSS使瓷砖包裹？

Question

我正在使用Bulma CSS框架与Rails应用程序。 我有一个很长的项目列表，想要以平铺方式显示它们。 然而，这些平铺会超出屏幕而不是换行。

Bulma文档没有解决这个问题。由于我正在从可变长度列表动态创建平铺，因此像文档中描述的显式嵌套不太容易，我希望它干净地换行到下一行。

以下是我的代码基本外观：

<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;的选项，但是我还没有找到该选项。

---

更新：可以在父容器上添加style flex-wrap: wrap;，但是否有Bulma集成的类标志？

- martin-martin

---

我刚刚遇到了这个确切的问题，你提供的将flex-wrap应用于父容器的解决方案对我很有帮助。我认为你应该将它作为答案并接受它。我查看了文档，但找不到任何类标志。 - MForMarlon

嘿@MForMarlon，感谢您的关注和评论。好的，我可以做到 :) - martin-martin

Answer 1

看起来，Bulma目前没有直接解决这个问题的类标志。

然而，由于Bulma基于flexbox，可以向父容器添加样式flex-wrap: wrap;以实现所需结果。

- martin-martin

Answer 2

对于网格系统，Bulma确实有一个相关的类。

如果您在.columns元素中添加is-multiline，它应该会自动换行。(在幕后添加了flex-wrap: wrap;)

来源：Bulma列文档 (不确定这如何适用于瓷砖，但您总是可以将它们包装成列)

- Kishan Jayant

Answer 3

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

将style="white-space: normal!important;"应用于<p>标签可以强制其正常换行，并为我解决了问题。

- Kurt Peniket