Хаки и Скрипты Next Generation CMS

Спрятать блок на мобилках

irbees2008 irbees2008 Опубликовано - 27 - января Bootstrap 4
1431 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Всем привет, вот нашел нужную мне фишку,поскольку на некоторых проектах используется Bootstrap 3, вот и пришлось публиковать в Bootstrap 4. И там мне понадобилось спрятать блоки на мобилках. Это значит надо спрятать блоки div на маленьких экранах ,с расширение ниже <768px . Мне подадобилось спрятать не нужные блоки в сайтбаре , поскольку они мешали нормальной загрузке основного контента.

В Bootstrap 2 использовались классы .hidden-phone, .hidden-tablet и т.д. Как вы поняли они устарели, и в Bootstrap 3 не работают.
Так вот в Bootstrap 3 используют вот эти классы

1.Мобильные устройства (<768px) — .visible-xs, .hidden-xs
2.Планшеты (768px — 992px) — .visible-sm, .hidden-sm
3.Десктопы (992px — 1200px) — .visible-md, .hidden-md
4.Большие экраны (>1200px) — .visible-lg, .hidden-lg

Ну и пример

Код:
<div class='hidden-xs hidden-sm'>
<div class='bаg-image>...</div>
</div>

Можешь почитать и вот эту статейку "Ставим вертикальное выпадающие меню на CSS"

Опрос

Ваше мнение

Вы нашли что искали?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4375 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 661
  • Онлайн всего: [7]
  • Гости: [7]
  • Были сегодня : [3] Яндекс, Google, Яндекс
  • SQL запросов: 31
  • Генерация страницы: 0.463сек
  • Потребление памяти: 5.355 Mb 
  •   Яндекс.Метрика