Понимание классов сетки (col-sm- # и col-lg- #) в Bootstrap 3

Я начинаю работать с Bootstrap 3, и у меня возникли проблемы с пониманием того, как должны использоваться классы сетки.

Вот что я выяснил:

Похоже, что классы col-sm-#и col-lg-#отличаются от простого старого col-#тем, что они будут применяться только тогда, когда экраны превышают определенный размер (768 пикселей и 992 пикселей соответственно). Если вы опустите -sm- или -lg-, div никогда не свернется в один столбец.

Тем не менее, когда я создаю две дивы внутри подряд , что оба col-sm-6, кажется , они только бок о бок , когда окно находится между 768px и 992px в ширину. Другими словами, если я сжать окно весь путь вниз и затем медленно расширить его, раскладка один столбец, а затем два столбца, а затем обратно в одну колонку снова .

1. Это предполагаемое поведение?
2. Если мне нужны два столбца для чего-либо более 768 пикселей, следует ли применять оба класса? ( <div class="col-sm-6 col-lg-6">)
3. Следует col-6 также быть включены?<div class="col-6 col-sm-6 col-lg-6">

[ОБНОВЛЕНИЕ НИЖЕ]

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

Ответы на мои вопросы:

1. Да, они предназначены для применения только к определенным диапазонам, а не ко всему, что превышает определенную ширину.

2. Да, классы предназначены для объединения.

3. Похоже, что это уместно в некоторых случаях, но не в других, потому что классы col- # в основном эквивалентны col-xsm- # или ширине более 0 пикселей (все ширины).

Помимо слишком быстрого чтения документации, я думаю, что был сбит с толку, потому что вошел в Bootstrap 3 с «менталитетом Bootstrap 2». В частности, я использовал (необязательно) отзывчивые стили (bootstrap-responsive.css) в v2, а v3 совершенно разные (для лучшего IMO).

ОБНОВЛЕНИЕ для стабильной версии:

Этот вопрос изначально был написан, когда вышел RC1. Они внесли некоторые серьезные изменения в RC2, поэтому для всех, кто читает это сейчас, не все, что упомянуто выше, применимо.

На момент написания этой статьи col-*-#классы ДЕЙСТВИТЕЛЬНО применяются вверх. Так, например, если вы хотите, чтобы элемент состоял из 12 столбцов (полная ширина) для телефонов и двух 6 столбцов (полстраницы) для планшетов и выше, вы должны сделать что-то вроде этого:

<div class="col-xs-12 col-sm-6"> ... //NO NEED FOR col-md-6 or col-lg-6

(Они также добавили дополнительную точку останова xs после того, как этот вопрос был написан.)

Здесь у вас есть очень хорошее руководство, в котором объясняется, как использовать новые классы сетки в Bootstrap 3.

Он также охватывает миксины и т. Д.

«Если мне нужны две колонки для чего-то более 768 пикселей, следует ли применять оба класса?»

Это должно быть так просто:

<div class="row">
      <div class="col-sm-6"></div>
      <div class="col-sm-6"></div>    
</div>

Добавлять col-lg-6тоже не нужно .

Демо: http://www.bootply.com/73119

Лучший способ понять - просто подумать сверху вниз (от больших настольных компьютеров до мобильных телефонов)

Во-первых, поскольку B3 сначала является мобильным, поэтому, если вы используете xs, столбцы будут одинаковыми от больших рабочих столов до xs (я рекомендую использовать xs или sm, поскольку это сохранит все, как вы хотите, на каждом размере экрана)

Во-вторых, если вы хотите указать разную ширину столбцам на разных устройствах или разрешениях, вы можете добавить несколько классов, например

приведенное выше изменит ширину в соответствии с разрешениями экрана, ПОМНИТЕ, что я сохраняю общее количество столбцов в каждом классе = 12

Надеюсь, мой ответ поможет!

Для того, чтобы изменить ответ SDP в выше, вам не нужно объявлять col-xs-12в <div class="col-xs-12 col-sm-6">. Bootstrap 3 ориентирован сначала на мобильные устройства, поэтому предполагается, что каждый столбец div по умолчанию имеет ширину 100%. Это означает, что при размере «xs» это 100% ширина, оно всегда будет по умолчанию для этого поведения независимо от того, что вы установили на sm, md, lg. Если вы хотите, чтобы ваши xsстолбцы не были на 100%, вы обычно делаете файл col-xs-(1-11).

Это может быть поздно, поскольку я думаю, что большинство из нас использует BS4. В этой статье подробно и просто объясняются все вопросы, которые вы задали, а также что делать и когда. Подробное руководство по использованию BS4 илиbootstrap

https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7