Я использую фреймворк 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 флаг класса?
Похоже, что в Bulma в настоящее время нет флага класса, который бы обращался к этому напрямую.
Однако, поскольку Bulma основана на flexbox, можно добавить стиль flex-wrap: wrap; в родительский контейнер для достижения желаемого результата.
Я еще не могу комментировать мой низкий репорт, и я не уверен, что у вас все еще есть проблема, но мне интересно, есть ли у вас элемент с классом is-fullheight? У меня была такая же проблема, как и вы, и когда я удалил класс is-fullheight из section class="hero ...", который у меня был, это фиксировало проблему элементов, которые не обертываются, как они должны.