Bootstrap 3 и .col-xs- * - Вам не нужны строки из 12 единиц?

Меня немного смущает документация Bootstrap 3 и, следовательно, использование классов .col-xs-*.

Документы для Параметры сетки говорят, что все сетчатые системы используют 12 столбцов.

Если вы посмотрите на Bootstrap 3 docs для макета Пример мобильного и рабочего стола, то они показывают классы первой строки .col-xs-*, всего 18 столбцов ед.

Что дает? Как это может быть? Неправильно ли документы?

Спасибо

Ответы

Ответ 1

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 документации, если вы столкнулись с какими-либо проблемами, когда столбцы не корректно обертываются.

Ответ 2

Подумайте о компоновке сетки больше с точки зрения различной сетки для каждого размера, 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. Это так, что вам не нужно иметь множество разных шаблонов разметки для разных точек останова. Они являются проводниками.

Ответ 3

Количество строк, которые занимает столбец, является последним числом класса.

Так, например, следующие классы:

.col-xs-12 .col-md-8  
.col-xs-6 .col-md-4

приведет к одной строке на дисплеях ширины md, но будет отображаться одна и половина строк на дисплеях шириной xs.
Это просто означает, что на маленьких дисплеях эти элементы не будут отображаться бок о бок, а вместо этого друг на друга.