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


85

Я начинаю работать с 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">

Прочтите таблицу: getbootstrap.com/css/#grid # 1 - это предполагаемое поведение, поскольку используется @mediaдля определенных размеров. № 2 и № 3 да, прочтите «Пример: сочетание мобильных устройств с настольными компьютерами» и «Пример: мобильные устройства, планшеты и настольные компьютеры»
RaphaelDDL,

@RaphaelDDL Спасибо. Я понял это вскоре после публикации. Думаю, я ожидал, что v3 будет вести себя как "bootstrap-responsive.css" v2, но это не так.
emersonthis 09

Ответы:


60

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

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

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

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


Гиперссылка указывает на несуществующую страницу. Я не уверен, нужно ли его обновить, чтобы указать на ссылку, предоставленную @RaphaelDDL выше - getbootstrap.com/css/#grid - или на какую-то другую ссылку?
Джон Шнайдер

Спасибо за вопрос и ответ. Я не сторонник css, и настройка сетки сначала меня тоже сбивала с толку. Но если то, что вы говорите, правда, кажется, лучше просто использовать xs и позволить всем применяться вверх.
Майк Перселл

39

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

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


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

2
Это очень хорошо, особенно его стиль - постоянно побуждать вас к упорству; «Полезно, правда? Нет? Не знаю? Давайте продолжим!» а также объяснение вещей правильными предложениями: «По сути, это говорит:« Держите меня шириной в 6 столбцов вплоть до размера телефона, никогда не переключайте меня на сложенный мобильный макет ».» . Спасибо за публикацию
slugmandrew

5

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


По причинам, которые я пока не могу объяснить, для меня это не работает. .col-sm-6кажется, применимо только к этому конкретному диапазону ширины (не ко всему, что указано выше)
emersonthis

5

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

Во-первых, поскольку 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).


0

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

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


рассмотрите возможность размещения соответствующей информации из вашей ссылки в отведенном для ответа месте.
сб,

Я включил ссылку только потому, что мне было полезно начать читать статью с начала. Вот когда это имеет смысл.
AAA,
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.