@raulvodov

Как работают в Bootstrap сетке следующие классы xs, sm, md, lg?

Читаю документацию по Бутстрап сетке и запутался. Для каждого размера экрана прописываются классы xs, sm, md, lg. При этом в документации bootstrap-3.ru/css.php#grid как-то непонятно расписано, что если использоваться например только xs класс, то он будет работать для всех размеров или как-то так. Вообщем такой вопрос, на практике для живых проектов чаще всего прописываются все 4 класса или есть какие-то лайф хаки в медиазапросах? Просьба ответить в очень простой форме, так как в верстке новичок :)
  • Вопрос задан
  • 781 просмотр
Решения вопроса 2
hoOstel
@hoOstel
каждый класс "xs, sm, md, lg" это разный media запрос.
.col-xs- стили будут применяться на всех размерах экрана
.col-sm- стили будут применяться если у устройства ширина ≥768px
.col-md- стили будут применяться если у устройства ширина ≥992px
.col-lg- стили будут применяться если у устройства ширина ≥1200px
Ответ написан
@Shinso
Все зависит от отго что делаешь, но у меня лично lg почти никогда не используется сразу ставлю md так как на таких размерах изменения особых на макете нет, если видишь что у тебя колонки по количеству как были на большом разрешении так и остались на мобильном то сразу ставь xs, в общем использование крайне простое например было у тебя на большом экране подрят 4 картинки с подписями, для каждой пропивываешь col-md-3 затем на неком размере при адаптиве они уже выглядят слишком маленькими ставишь еще каждому по col-sm-6 и они уже будут не 4 в ряд а 2 ряда по 2 картинки и когда экран сузиться до меньшего чем sm разрешения они уже станут по одной в ряд
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@redd_i
Сам еще не разобрался. Но смотри
У тебя есть телефон. Тебе надо что бы в нем было 2 столбца. Тогда пишешь .col-xs-12, если надо 2 столбца - то .col-xs-6
Для планшетов .col-sm- по той же схеме. Для нотиков .col-md-. Для пк и выше .col-lg-

Вот ты сделал к примеру для ноута

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
test
</div>

В этом случае для телефонов будет 1 колонка, для планшетов 2, для нотиков 3 и для пк 4.

Я не уверен. Но надеюсь понял правильно)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы