Скрытие элементов в адаптивных макетах с помощью Bootstrap

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

Решение:

Bootstrap предлагает классы, которые позволяют чтобы скрыть элементы в зависимости от размера экрана:

• Очень маленькие устройства: Телефоны (
• Малые устройства: Планшеты (≥768 пикселей) – .visible-sm-* ( показать), .hidden-sm (скрыть)
• Средние устройства: Настольные компьютеры (≥992 пикселей) — .visible-md-* (показать), .hidden-md (скрыть)
• Большие устройства: Настольные компьютеры (≥1200 пикселей) — .visible-lg-* (показать), .hidden-lg (скрыть)

Пример Использование:

Чтобы скрыть элемент .nav-pills на маленьких экранах:

  ...

Дополнительные примечания:

• Для Bootstrap 4 используйте скрытый-*-вверх (скрывается для больших точек останова) или скрытый-*-вниз (скрывается для меньших точек останова).
• Bootstrap 3.2.0 устарел .hidden-* в пользу .visible-*.
• В старых версиях Bootstrap .hidden-phone и .hidden-tablet устарели.