it-swarm.com.ru

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

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

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

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

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

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

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

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

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

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

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

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

Кроме того, что я слишком быстро читаю документы, я думаю, что я был сбит с толку, потому что я вошел в Bootstrap 3 с "Bootstrap 2 mindality". В частности, я использовал (опционально) отзывчивые стили (bootstrap-responseive.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 после того, как этот вопрос был написан.)

60
emersonthis

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

Это также покрывает mixins и т.д.

39
Srikanth

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

5
helloerik

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

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

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

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

Я надеюсь, что мой ответ поможет!

4
Aslam

"Если я хочу два столбца для чего-то более 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
Zim