如何使用 Bulma 包裹瓷砖 CSS

Question

我在 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;，但我还找不到这个选项。

更新： 可以将 style flex-wrap: wrap; 添加到父容器中，但是是否有 Bulma 集成 class旗帜？

Answer 1

Bulma 中目前似乎没有 class-flag 直接解决这个问题。

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

Answer 2

对于网格系统 Bulma 确实有一个 class。

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

来源：Bulma column docs

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

Answer 3

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

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

如何使用 Bulma 包裹瓷砖 CSS

How to make tiles wrap with Bulma CSS

css

flexbox

bulma