Bootstrap 4 отзывчивые утилиты видимые/скрытые xs sm lg не работают

Проблема с новыми отзывчивыми утилитами скрытыми/видимыми классами при переходе на Bootstrap 4. Я знаю, что .hidden-classes были удалены из v3 и заменены с помощью .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, режим адаптивного дизайна)

Ответ 1

С Bootstrap 4 .hidden-* классы были полностью удалены (да, они были заменены на hidden-*-*, но эти классы также исчезли из альфа-версии v4). Начиная с v4-бета, вы можете объединить классы .d-*-none и .d-*-block для достижения того же результата. видимый- * был удален; вместо использования явных классов .visible-*, сделать элемент видимым, не скрывая его (опять же, используйте комбинации .d-none.d-md-block). Вот рабочий пример:

<div class="col d-none d-sm-block">
    <span class="vcard">
        …
    </span>
</div>
<div class="col d-none d-xl-block">
    <div class="d-none d-md-block">
                …
    </div>
    <div class="d-none d-sm-block">
                …
    </div>
</div>

class="hidden-xs" становится class="d-none d-sm-block" (или d-none d-sm-inline-block)...

Пример загрузочных утилит Bootstrap 4:

<div class="d-none d-sm-block"> hidden-xs           
  <div class="d-none d-md-block"> visible-md and up (hidden-sm and down)
    <div class="d-none d-lg-block"> visible-lg and up  (hidden-md and down)
      <div class="d-none d-xl-block"> visible-xl </div>
    </div>
  </div>
</div>

<div class="d-sm-none"> eXtra Small <576px </div>
<div class="d-none d-sm-block d-md-none d-lg-none d-xl-none"> SMall ≥576px </div>
<div class="d-none d-md-block d-lg-none d-xl-none"> MeDium ≥768px </div>
<div class="d-none d-lg-block d-xl-none"> LarGe ≥992px </div>
<div class="d-none d-xl-block"> eXtra Large ≥1200px </div>

<div class="d-xl-none"> hidden-xl (visible-lg and down)         
  <div class="d-lg-none d-xl-none"> visible-md and down (hidden-lg and up)
    <div class="d-md-none d-lg-none d-xl-none"> visible-sm and down  (or hidden-md and up)
      <div class="d-sm-none"> visible-xs </div>
    </div>
  </div>
</div>

codepen.io/_yatko/pen/ZJXQxy

Ответ 2

**** Размер экрана Класс ****

Скрыто на всех .d-нет
Скрыто только на xs .d-none.d-sm-block
Скрыто только на см .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

Ответ 3

Bootstrap 4 (^ beta) изменил классы для адаптивного скрытия/отображения элементов. Смотрите эту ссылку для правильного использования классов: http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

Ответ 4

Некоторая версия работает

<div class="hidden-xs">Only Mobile hidden</div>
<div class="visible-xs">Only Mobile visible</div>