Не работает “hidden” в bootstrap 4

#html #html5 #bootstrap

Не скрывает элементы в bootstrap 4, при подключении bootstrap 3 все работает хорошо





Example
Resize this page to see how the text below changes:
This text is hidden on an EXTRA SMALL screen.
This text is hidden on a SMALL screen.
This is text hidden on a MEDIUM screen.
This is text hidden on a LARGE screen.



    

Ответы

Ответ 1

В beta версии в очередной раз все переиграли и теперь группа классов имеет вид:

.d-*-none


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

Пример:





Example
Resize this page to see how the text below changes:
This text is hidden on an EXTRA SMALL screen and larger.
This text is hidden on a SMALL screen and larger.
This is text hidden on a MEDIUM screen and larger.
This is text hidden on a LARGE screen and larger.


Ответ 2

Классы hidden-* и visible-* в бета-версии Bootstrap 4 удалены. Если вы хотите скрыть
элемент на определенных уровнях или контрольных точках в Bootstrap 4, используйте классы
отображения d- *.


hidden-xs-down = d-none d-sm-block 
hidden-sm-down = d-none d-md-block
hidden-md-down = d-none d-lg-block
hidden-lg-down = d-none d-xl-block
hidden-xl-down = d-none (same as hidden)
hidden-xs-up = d-none (same as hidden)
hidden-sm-up = d-sm-none
hidden-md-up = d-md-none
hidden-lg-up = d-lg-none
hidden-xl-up = d-xl-none
hidden-xs (only) = d-none d-sm-block (same as hidden-xs-down)
hidden-sm (only) = d-block d-sm-none d-md-block
hidden-md (only) = d-block d-md-none d-lg-block
hidden-lg (only) = d-block d-lg-none d-xl-block
hidden-xl (only) = d-block d-xl-none
visible-xs (only) = d-block d-sm-none
visible-sm (only) = d-none d-sm-block d-md-none
visible-md (only) = d-none d-md-block d-lg-none
visible-lg (only) = d-none d-lg-block d-xl-none
visible-xl (only) = d-none d-xl-block


Оригинал - Stackoverflow EN