26

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

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 集成的类标志？

4

3 回答 3

30

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

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

于 2018-05-02T12:53:43.947 回答
1

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

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

资料来源：布尔玛专栏文档

（不知道这如何适用于瓷砖，但你总是可以将它们包装成列）

于 2020-09-03T17:49:32.647 回答
0

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

直接应用style="white-space: normal!important;"到<p>标签上迫使它正常包装并为我解决了这个问题。

于 2021-09-08T15:06:26.477 回答