Bootstrap 3 Применить CSS только на Mobile View

Я использую Bootstrap 3. В мобильном представлении я хотел бы применить некоторый CSS для исправления некоторых ошибок в мобильном представлении. Я искал документацию и Google. Я не могу найти подсказки.

Возможно ли это?

Ответы

Ответ 1

Просто используйте соответствующие медиа-запросы в своем CSS, например

@media (max-width: 767px) {
    /* CSS goes here */
}

Bootstrap определяет следующие ширины

  • Дополнительные небольшие устройства (телефоны размером менее 768 пикселей)
  • Маленькие устройства (планшеты, 768px и выше)
  • Средние устройства (рабочие столы, 992px и выше)
  • Крупные устройства (большие рабочие столы, 1200 пикселей и выше)

Подробнее о медиа-запросах см. http://css-tricks.com/css-media-queries/.

Ответ 2

Есть также отзывчивые утилиты, вы можете добавлять классы к определенным элементам, чтобы показать или скрыть их при определенных размерах видового экрана.

.hidden-xs or .visible-xs

http://getbootstrap.com/css/#responsive-utilities

Ответ 3

Вы можете использовать адаптивные классы отображения https://getbootstrap.com/docs/4.3/utilities/display/ в Bootstrap 4

Так, например, вы хотите скрыть определенный элемент только для телефонов (как в портретном, так и в альбомном режиме или xs и sm), вы можете сделать

<div class="big_image d-none d-md-block">
</div>