@raulvodov

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

Читаю документацию по Бутстрап сетке и запутался. Для каждого размера экрана прописываются классы xs, sm, md, lg. При этом в документации bootstrap-3.ru/css.php#grid как-то непонятно расписано, что если использоваться например только xs класс, то он будет работать для всех размеров или как-то так. Вообщем такой вопрос, на практике для живых проектов чаще всего прописываются все 4 класса или есть какие-то лайф хаки в медиазапросах? Просьба ответить в очень простой форме, так как в верстке новичок :)
  • Вопрос задан
  • 216 просмотров
Решения вопроса 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 разрешения они уже станут по одной в ряд
    Ответ написан
Пригласить эксперта
Ответы на вопрос 2
  • y0u
    @y0u
    dev
    Какие лайфхаки? Берете и читаете документацию, там написано всё. Таблица даже есть, чтобы более понятно было.
    XS - не имеет медиазапроса, как сказано в документации "No media query since this is the default in Bootstrap". С него всё и начинается. Если вы будете использовать только XS - значит это будет работать для всех размеров экрана., SM - только для размеров экрана >= 768, и так далее.

    Если вы напишете col-xs-12 col-lg-4, это значит, что ваш блок будет шириной в 100% до тех пор, пока размер экрана не станет >=1200, после этого он будет уже занимать 33.33%.
    Ответ написан
  • @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
Похожие вопросы
Вакансии с Моего Круга Все вакансии
Заказы с Фрилансим Все заказы