По какому принципу работает добавление нескольких классов для колонок? Почему их больше 12-ти?

Question

[dhat]

Извиняюсь за нубские вопросы.
В примерах на оф. сайте такой код:

<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>

И сразу же два непонятных момента.
Во-первых, почему col-xs-12 и col-xs-6? Вместе же получается 18 колонок. А везде написано что работает по принципу 12 колонок.
Во-вторых, как работает это совмещение классов "col-xs-12 col-md-8"? Как одновременно могут быть заданы эти свойства?

Комментарии к коду совершенно ничего не объясняют:

<!-- Stack the columns on mobile by making one full-width and the other half-width -->

Получается что, Бутстрап кормит mobile девайсам один класс, а десктопам - другой класс? Так бывает что-ли?)))

Answer 1

[Cyber_bober]

Посмотрите документацию по бутстрэпу, там ясно обозначено что xs md sm lg это классы для разной ширины дисплея. Соответственно
class="col-xs-12 col-md-8"

Буду формировать ширину блок в соответствии с текущей шириной экрана.

А такая конструкция сделает один блок шириной в 12 колонок, а второй блок под ним шириной в 6 колонок.

<div class="col-xs-12">
  <div class="col-xs-6">

Comments

[dhat]

1. Вы имеете ввыиду это? getbootstrap.com/css/#grid-options
Получается это обычные media queries?

2. В моем примере другой случай, там дивы не вложенны друг в друга! Я не понимаю почему в сумме получается 18.

[Cyber_bober]

dhat: прикрепил пикчу. Если у вас влазит в строку в ворде влазит 12 букв, а вы написали 18 букв, куда оставшиеся 6 денутся?

[dhat]

Я кажется все понял. Спасибо!

Answer 2

[Игорь Перегудов]

Смотри, xs - экстра маленькие устройства, sm - маленькие, md - средние, lg - большие, так вот когда ты задаешь md и xs - будет работать всегда md, до тех пор, пока размер экрана не станет экстра смол - 768 (вроде как в бутстрапе), получается, что в твоем примере

<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>

первый блок будет занимать 8 колонок, второй - 4 соответственно, как только размер экрана станет 768px - первый блок будет занимать всю ширину - 12 колонок, а второй будет снизу и занимать пол экрана - 6 колонок. Если по колонкам следующие блоки не помещаются в ряд из 12 - они переносятся на следующий и прижимаются к левой стороне, т.к. имеют float" left

p.s. если у тебя структура, как в примере ниже одинаковая, и ты хочешь чтобы на маленьких устройствах блок занимал всю ширину, col-xs-12 задавать не обязательно, получается так, ты до sm будет действовать правило col-sm-6, а после автомтически col-xs-12

для наглядности код:

<div class="col-sm-6 portfolio__item">
...
</div>
<div class="col-sm-6 portfolio__item">
...
</div>
<div class="col-sm-6 portfolio__item">
...
</div>
<div class="col-sm-6 portfolio__item">
...
</div>

А выглядит это так:
На больших устройствах


На маленьких

Comments

[dhat]

Я понял, только у меня срабатывает при 992px, а не 768. По идее, md работает только если ≥992px, вы наверное опечатались?

[dhat]

Вот в таблице 992 getbootstrap.com/css/#grid-options

[Игорь Перегудов]

dhat: md - да, 992, sm 768 =)