Я использую Bootstrap 3. В мобильном представлении я хотел бы применить некоторый CSS для исправления некоторых ошибок в мобильном представлении. Я искал документацию и Google. Я не могу найти подсказки.
Возможно ли это?
Bootstrap 3 Применить CSS только на Mobile View
Ответ 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
Ответ 3
Вы можете использовать адаптивные классы отображения https://getbootstrap.com/docs/4.3/utilities/display/ в Bootstrap 4
Так, например, вы хотите скрыть определенный элемент только для телефонов (как в портретном, так и в альбомном режиме или xs и sm), вы можете сделать
<div class="big_image d-none d-md-block">
</div>