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

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

Вот что я догадался до сих пор:

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

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

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

ОТВЕТЫ

Ответ 1

[UPDATE НИЖЕ]

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

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

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

  • Да, классы должны быть объединены.

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

Помимо чтения документов слишком быстро, я думаю, что я был смущен, потому что я вошел в Bootstrap 3 с "менталитетом Bootstrap 2". В частности, я использовал (необязательные) отклики стилей (bootstrap-responsive.css) в версиях v2 и v3 совершенно разные (для лучшего ИМО).

UPDATE для стабильной версии:

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

С того момента, когда я сейчас пишу это, классы col-*-# DO, похоже, применяются вверх. Например, если вы хотите, чтобы для элементов было 12 столбцов (полная ширина) для телефонов, но два 6 столбцов (половина страницы) для планшетов и выше, вы сделали бы что-то вроде этого:

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

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

Ответ 2

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

Он также охватывает mixins и т.д.

Ответ 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

Ответ 4

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

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

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

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

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

Ответ 5

Чтобы изменить ответ 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).