Понимание классов сетки (col-sm - # и col-lg -#) в Bootstrap 3
Я начинаю работу на Bootstrap 3, и у меня возникли некоторые проблемы с пониманием того, как классы сетки предназначены для использования.
вот что я уяснил:
похоже, что классы col-sm-# и col-lg-# отличаются от старых добрых col-# в том, что они будут применяться только тогда, когда экраны выше определенного размера (768px и 992px соответственно). Если вы опустите-sm - или-lg-divs никогда не свернется в один столбец.
однако, когда я создаю два дива внутри строки, которые оба col-sm-6 кажется, они только бок о бок, когда окно находится между 768px и 992px широкий. Другими словами, если я сжимаю окно полностью вниз, а затем медленно расширяю его, макет-это один столбец, затем два столбца, а затем обратно в один столбец снова.
- это предполагаемое поведение?
- если я хочу два столбца для чего-либо более 768px, я должен применить и занятия? (
<div class="col-sm-6 col-lg-6">) - должны
col-6и включить?<div class="col-6 col-sm-6 col-lg-6">
5 ответов:
[ОБНОВЛЕНИЯ]
Я еще раз взглянул на документы, и, похоже, я пропустил раздел, в котором говорится конкретно об этом.
ответы на мои вопросы:
Да, они предназначены для применения только к определенным диапазонам, а не все выше определенной ширины.
да, классы предназначены для объединения.
Кажется, что это уместно в некоторые случаи, но не другие, потому что классы col-# в основном эквивалентны col-xsm-# или, ширины выше 0px (все ширины).
кроме чтения документов слишком быстро, я думаю, что я был смущен, потому что я пришел в Bootstrap 3 с "Bootstrap 2 менталитет". В частности, я использовал (необязательные) адаптивные стили (bootstrap-responsive.css) в v2 и v3 совершенно разные (в лучшую сторону ИМО).
обновление для стабильной релиз:
этот вопрос был первоначально написан, когда 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.
оно также покрывает mixins etc.
чтобы изменить ответ SDP выше, вам не нужно объявлять
col-xs-12на<div class="col-xs-12 col-sm-6">. Bootstrap 3 является мобильным - во-первых, поэтому каждый столбец div по умолчанию считается 100% шириной div-что означает, что при размере "xs" это 100% ширина, он всегда будет по умолчанию для этого поведения независимо от того, что вы установили вsm, md, lg. Если вы хотите вашxsстолбцы, чтобы быть не 100%, то вы обычно делаетеcol-xs-(1-11).
" Если я хочу два столбца для чего-либо более 768px, я должен применить оба класса?"
Это должно быть так:
<div class="row"> <div class="col-sm-6"></div> <div class="col-sm-6"></div> </div>нет необходимости добавлять
col-lg-6тоже.
лучший способ понять это просто думать сверху вниз (большие настольные компьютеры для мобильных телефонов)
во-первых, поскольку B3 является мобильным первым, поэтому если вы используете xs, то столбцы будут одинаковыми от больших настольных компьютеров До xs ( я рекомендую использовать xs или sm, поскольку это будет держать все так, как вы хотите на каждом размере экрана )
во-вторых, если вы хотите дать разную ширину столбцов на разных устройствах или разрешениях, чем вы можете добавить несколько классов е.г
выше будет изменить ширину в соответствии с разрешениями экрана, помните, что я держу общее количество столбцов в каждом классе = 12
Я надеюсь, что мой ответ поможет!
Comments