Question

我使用Bulma CSS框架和Rails应用程序。我有很长的项目列表，并希望在瓷砖中显示它们。但是，瓷砖会从屏幕上移开而不是包裹到下一行。

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

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

Answer 1

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

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

Answer 2

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

如果将is-multiline添加到.columns元素中，则该元素应自动换行。（在幕后加上flex-wrap: wrap;）

来源：Bulma column docs

（不确定如何将其应用于图块，但您始终可以将它们包装到列中）

Answer 3

我无法评论我的低级代表，我不确定你是否还有问题，但我想知道你是否有类is-fullheight的任何元素？我遇到了与您相同的问题，当我从is-fullheight移除section class="hero ..."类时，这解决了元素问题没有按照它们应该包装的问题。

如何使用Bulma CSS制作瓷砖包装

3 个答案: