Есть ли в ZURB Foundation 6 способ обтекания столбцов скрытым столбцом? - PullRequest
Новая
       9

Есть ли в ZURB Foundation 6 способ обтекания столбцов скрытым столбцом?

0 голосов
/ 18 февраля 2020

Используя ZURB Foundation 6, есть ли способ, чтобы столбцы обтекали скрытый столбец?

Итак, для этого кода: 

<ul class="row large-up-3">
    <li class="column column-block large-4" style="display:none;">1</li>
    <li class="column column-block large-4">2</li>
    <li class="column column-block large-4">3</li>
    <li class="column column-block large-4">4</li>
    <li class="column column-block large-4">5</li>
    <li class="column column-block large-4">6</li>
</ul>

В настоящее время это выглядит так: 

2  3
4  5  6

Но я надеюсь достичь следующего: 

2  3  4
5  6

Это возможно?

Мне не нужно использовать «display: hidden», если есть другой способ сделать это. Это просто код заполнителя CSS.

Если нет, есть ли способ сделать это в Bootstrap или написать свою собственную сетку CSS? При необходимости я могу обойти Foundation для этого конкретного контента.

Спасибо за любую помощь!

1 Ответ

0 голосов
/ 23 февраля 2020

Разобрался. В Foundation 6 следующий код CSS заставляет каждую строку начинать заново: 

.large-up-3 > .column:nth-of-type(3n+1), .large-up-3 > .columns:nth-of-type(3n+1) {
    clear: both;
}

Примечание. Я использую строку из трех-трех столбцов, поэтому ваш код будет отличаться в зависимости от того, сколько столбцы у вас есть на строку.

Так что если вы измените clear:both на clear:none, вы можете затем скрыть столбцы, используя display:none, и столбцы автоматически заполнят все пробелы.

Почему ZURB делает это?

Что ж, если вы измените этот код CSS, вы обнаружите, что ваши столбцы больше не выстраиваются вертикально из-за разной высоты столбцов.

этот код CSS заставляет все выглядеть хорошо.

Если вы удалите код clear:both, а затем столкнетесь с проблемами выравнивания, вы можете заглянуть в код "эквалайзера" ZURB, чтобы установить все ваши столбцы равными высота.

https://get.foundation/sites/docs/equalizer.html

Существуют различные способы дополнительной подстройки вещей, если одинаковые высоты столбцов в вашей теме выглядят неправильно, например, использование переполнения CSS варианты, но это выходит за рамки этого д uestion.

Надеюсь, это кому-нибудь поможет!

...