Меня немного смущает документация Bootstrap 3 и, следовательно, использование классов .col-xs-*.
Документы для Параметры сетки говорят, что все сетчатые системы используют 12 столбцов.
Если вы посмотрите на Bootstrap 3 docs для макета Пример мобильного и рабочего стола, то они показывают классы первой строки .col-xs-*, всего 18 столбцов ед.
Что дает? Как это может быть? Неправильно ли документы?
Спасибо
Bootstrap - это 12 столбцов, но вы можете разместить более 12 столбцов подряд. Остальные столбцы будут просто перенесены на следующую строку ниже, в зависимости от области просмотра.
В этом примере на видовых экранах "md" (≥992px) содержимое будет охватывать 12 столбцов всего (8 + 4). Но на "xs" (< 768px) содержание будет охватывать 18 столбцов, будет одна полная строка (12 столбцов), а затем под ним половина строк (6 столбцов).
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
мкр...
| 8 | 4 |
хз...
| 12 |
| 6 |
РЕДАКТИРОВАТЬ. Обязательно ознакомьтесь с разделом Отзывчивая колонка Reset документации, если вы столкнулись с какими-либо проблемами, когда столбцы не корректно обертываются.
Подумайте о компоновке сетки больше с точки зрения различной сетки для каждого размера, lg, md, sm и xs (или точками разрыва), которые используют одну и ту же разметку. Это может помочь открыть несколько экземпляров браузера и пример макета сетки. Следуйте вместе с этой скрипкой или этой разметкой:
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-1">.col-xs-12 .col-sm-6 col-lg-1</div>
<div class="col-xs-12 col-sm-6 col-lg-1">.col-xs-12 .col-md-6 col-lg-1</div>
<div class="col-xs-12 col-sm-6 col-lg-1">.col-xs-12 .col-md-6 col-lg-1</div>
</div>
Вам нужно знать ширину вашего видового экрана в пикселях, поэтому рассмотрите плагин для браузера, который делает эту информацию легко доступной или открывает консоли и запустите этот фрагмент:
Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
Начните с области просмотрa > 1200 пикселей:
Фактические столбцы определяются классами col-lg-* из-за точки останова. Это создаст сетку для этой точки останова.
Теперь посмотрим на две другие точки останова, col-sm-* и col-xs-*.
col-sm-* в аффекте:
col-xs-* в аффекте:
Точки разлома позволяют создать совершенно новую сетку на размер. Итак, теоретически строки действуют как "строгая" новая строка, где в качестве чисел col, таких как
<div class='col-xs-12'>col-xs-12</div>
<div class='col-xs-12'>col-xs-12</div>
может заставить новую строку, если суммa > 12. Это так, что вам не нужно иметь множество разных шаблонов разметки для разных точек останова. Они являются проводниками.
Количество строк, которые занимает столбец, является последним числом класса.
Так, например, следующие классы:
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
приведет к одной строке на дисплеях ширины md, но будет отображаться одна и половина строк на дисплеях шириной xs.
Это просто означает, что на маленьких дисплеях эти элементы не будут отображаться бок о бок, а вместо этого друг на друга.