@raulvodov

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

Читаю документацию по Бутстрап сетке и запутался. Для каждого размера экрана прописываются классы xs, sm, md, lg. При этом в документации bootstrap-3.ru/css.php#grid как-то непонятно расписано, что если использоваться например только xs класс, то он будет работать для всех размеров или как-то так. Вообщем такой вопрос, на практике для живых проектов чаще всего прописываются все 4 класса или есть какие-то лайф хаки в медиазапросах? Просьба ответить в очень простой форме, так как в верстке новичок :)
  • Вопрос задан
  • 492 просмотра
Решения вопроса 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
Похожие вопросы