В Bootstrap v3 я часто использую скрытые классы - ** в сочетании с clearfix для управления многостолбцовой разметкой на разной ширине экрана. Например,
Я мог бы объединить несколько скрытых - ** в одном DIV, чтобы мои мультиколонки правильно отображались на экранах различной ширины.
В качестве примера, если бы я хотел отобразить ряды фотографий товара, по 4 на ряд на экранах большего размера, 3 на меньших экранах, затем 2 на очень маленьких экранах. Фотографии продукта могут иметь различную высоту, поэтому мне нужно исправление, чтобы обеспечить правильное разбиение строк.
Вот пример в v3 ...
http://jsbin.com/tosebayode/edit?html,css,output
Теперь, когда v4 покончил с этими классами и заменил их видимыми / скрытыми - ** - классами вверх / вниз, мне кажется, что вместо этого я должен сделать то же самое с несколькими DIV.
Вот похожий пример в v4 ...
http://jsbin.com/sagowihowa/edit?html,css,output
Таким образом, я перешел от отдельных DIV к необходимости добавлять несколько DIV с большим количеством классов повышения / понижения для достижения одной и той же цели.
Из...
<div class="clearfix visible-xs-block visible-sm-block"></div>
чтобы ...
<div class="clearfix hidden-sm-up"></div>
<div class="clearfix hidden-md-up hidden-xs-down"></div>
<div class="clearfix hidden-md-down"></div>
Есть ли лучший способ сделать это в v4, который я упустил?
источник
d-initial
так что вы больше не можете переопределитьd-<breakpoint>-hidden
и установить его в исходное значение. Если я хочу скрыть элемент на экранах меньшего размера, но показать его на средних и больших экранах, не зная начального отображения (которое может быть динамическим), я не могу восстановить его значение. Они не думали ни об этом.К сожалению , все классы
hidden-*-up
иhidden-*-down
были удалены из Bootstrap (от Bootstrap версии 4 Beta , в версии 4 Альфа и версии 3 эти классы все еще существуют).Вместо этого
d-*
следует использовать новые классы , как указано здесь: https://getbootstrap.com/docs/4.0/migration/#utilitiesЯ обнаружил, что новый подход менее полезен при некоторых обстоятельствах. Старый подход состоял в том, чтобы скрыть элементы, в то время как новый подход - показать элементы. Отображать элементы не так просто с CSS, так как вам нужно знать, отображается ли элемент как блок, встроенный блок, встроенный блок, таблица и т. Д.
Возможно, вы захотите восстановить прежние стили "hidden- *", известные из Bootstrap 3, с помощью этого CSS:
Классы
hidden-unless-*
не были включены в Bootstrap 3, но они также полезны и должны быть понятны.источник
Bootstrap v4.1 использует новые имена классов для сокрытия столбцов в своей сетке.
Чтобы скрыть столбцы в зависимости от ширины экрана, используйте
d-none
class или любой изd-{sm,md,lg,xl}-none
классов. Чтобы отобразить столбцы на экранах определенного размера, объедините вышеупомянутые классы сd-block
илиd-{sm,md,lg,xl}-block
классами.Примеры:
Больше из них здесь .
источник
Я не ожидаю, что несколько Div это хорошее решение.
Я также думаю, что вы можете заменить
.visible-sm-block
на.hidden-xs-down
и.hidden-md-up
(или.hidden-sm-down
и.hidden-lg-up
действовать на те же медиа-запросы).hidden-sm-up
компилируется в:.hidden-sm-down
и.hidden-lg-up
компилируется в:Обе ситуации должны действовать одинаково.
Ваша ситуация становится другой, когда вы пытаетесь заменить
.visible-sm-block
и.visible-lg-block
. Документы Bootstrap v4 говорят вам:источник
Пользователь Klaro предложил восстановить старые классы видимости, что является хорошей идеей. К сожалению, их решение не сработало в моем проекте.
Я думаю, что это лучшая идея восстановить старый миксин начальной загрузки, потому что он охватывает все точки останова, которые могут быть индивидуально определены пользователем.
Вот код:
В моем случае я вставил эту часть в
_custom.scss
файл, который на данный момент включен вbootstrap.scss
:источник
display: block
что прерывает поток в определенных сценариях.http://v4-alpha.getbootstrap.com/layout/responsive-utilities/
Теперь вы должны определить размер того, что скрывается, так
Скроет что-нибудь от хз и меньше, только хз
Скроет все
источник
Для начальной загрузки 4 вот матричное изображение, объясняющее, какие классы используются для отображения / скрытия элементов, зависит от размера экрана:
Источник: Meduim: Bootstrap 4 Hidden & Visible
источник
Bootstrap 4, чтобы скрыть весь контент, используйте этот класс «.d-none», он будет скрывать все, независимо от точек останова, таких же, как предыдущий класс версии начальной загрузки «.hidden».
источник
К сожалению, эти новые классы начальной загрузки 4 не работают так же, как старые классы div, используя их,
collapse
поскольку они устанавливают видимый div, дляblock
которого начинается видимый, а не скрытый, и если вы добавляете дополнительный div вокругcollapse
функциональности, он больше не работает.источник
источник