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

81

Я начинаю работу с 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">
  • 0
    Прочитайте таблицу: getbootstrap.com/css/#grid # 1 - Это предполагаемое поведение, потому что использует @media для определенных размеров. # 2 и # 3 да, прочитайте «Пример: объединение мобильного телефона с рабочим столом» и «Пример: мобильный телефон, планшет и рабочий стол»
  • 0
    @RaphaelDDL Спасибо. Я понял это вскоре после публикации. Я думаю, что я ожидал, что v3 будет вести себя как v2 "bootstrap-responseive.css", но это не так.
Показать ещё 1 комментарий
Теги:
twitter-bootstrap-3

5 ответов

58
Лучший ответ

[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 после того, как этот вопрос был написан.)

Поделиться
  • 0
    Гиперссылка указывает на несуществующую страницу в данный момент. Я не уверен, следует ли обновить его, чтобы он указывал на ссылку, указанную выше @RaphaelDDL - getbootstrap.com/css/#grid, - или на какую-то другую ссылку?
  • 0
    Спасибо за вопрос и ответ. Я не парень CSS, и настройка сетки меня сначала смутила. Но если, если то, что вы говорите, правда, то лучше просто использовать xs и позволить всему применить вверх.
Показать ещё 1 комментарий
39

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

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

Поделиться
  • 11
    Эта ссылка заслуживает внимания и должна получить больше кредитов.
  • 2
    Ссылка на блог подробно описывает сетку Bootstrap 3, включая 4 класса определения размеров, таких как col-xs- *. Имеет хорошие примеры кода.
Показать ещё 3 комментария
4

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

Поделиться
4

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

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

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

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

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

Поделиться
4

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

Поделиться
  • 0
    По причинам, которые я пока не могу объяснить, у меня так не получается. .col-sm-6 кажется, применяется только к этому конкретному диапазону ширины (не ко всему выше)
  • 2
    ЭТО ПРАВИЛЬНО!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню