Возникла проблема с новыми скрытыми / видимыми классами адаптивных утилит при переходе на Bootstrap 4 . Мне известно, что классы .hidden- были удалены из версии 3 и заменены на .hidden-*-up
.hidden-*-down
. Использование новых .hidden-*-up.hidden-*-down
классов, но элементы не меняются на видимые / скрытые. Не могу понять почему.
<div class="col hidden-xs-down">
<span class="vcard">
…
</span>
</div>
<div class="col hidden-lg-down">
<div class="hidden-sm-down">
…
</div>
<div class="hidden-xs-down">
…
</div>
</div>
* в этом примере ничего не скрыто, независимо от размера экрана (Safari, режим адаптивного дизайна)
Ответы:
С помощью Bootstrap 4
.hidden-*
классы были полностью удалены (да, они были заменены,hidden-*-*
но эти классы также исчезли из альфа- версии v4).Начиная с версии 4-бета, вы можете комбинировать
.d-*-none
и.d-*-block
классы для достижения того же результата.visible- * также был удален ; вместо использования явных
.visible-*
классов сделайте элемент видимым, не скрывая его (опять же, используйте комбинации .d-none .d-md-block). Вот рабочий пример:class="hidden-xs"
становитсяclass="d-none d-sm-block"
(или d-none d-sm-inline-block ) ...Пример отзывчивых утилит Bootstrap 4 :
Документация
источник
display
.Класс размера экрана
-
Скрыт на всех .d-none
Скрыт только на xs .d-none .d-sm-block
Скрыт только на sm .d-sm-none .d-md-block
Скрыт только на md .d-md-none .d-lg-block
Скрыт только на lg .d-lg-none .d-xl-block
Скрыт только на xl .d-xl-none
Виден на всех .d-блоках
Виден только на xs .d-block .d-sm-none
Виден только на sm .d-none .d-sm-block .d-md-none
Виден только на md .d-none .d-md-block .d-lg-none
Виден только на lg .d-none .d-lg-block .d-xl-none
Виден только на xl .d-none .d-xl-block
Перейдите по этой ссылке http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements
Ссылка 4.5: https://getbootstrap.com/docs/4.5/utilities/display/#hiding-elements
источник
Bootstrap 4 (^ beta) изменил классы для гибкого скрытия / отображения элементов. См. Эту ссылку, чтобы узнать, какие классы использовать: http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements
источник
Какая-то версия работает
источник