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

Question

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

该布尔玛文件并没有解决这个问题.由于我是从可变长度列表中动态创建切片,因此在文档中描述的显式嵌套并不那么容易,我宁愿将其干净地包装到下一行.

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

<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;到父容器以实现所需的结果.