Как сделать обертку плитки с помощью Bulma CSS

Я использую фреймворк 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 флаг класса?

Ответ 1

Похоже, что в Bulma в настоящее время нет флага класса, который бы обращался к этому напрямую.

Однако, поскольку Bulma основана на flexbox, можно добавить стиль flex-wrap: wrap; в родительский контейнер для достижения желаемого результата.

Ответ 2

Я еще не могу комментировать мой низкий репорт, и я не уверен, что у вас все еще есть проблема, но мне интересно, есть ли у вас элемент с классом is-fullheight? У меня была такая же проблема, как и вы, и когда я удалил класс is-fullheight из section class="hero ...", который у меня был, это фиксировало проблему элементов, которые не обертываются, как они должны.