@nsonso

Поясните принцип работы данного кода bootstrap?

В скачанном шаблоне, написанном на bootstrap, есть следующие строчки:

<div class="row client-logo">
      <div class="col-md-2 col-sm-4 col-xs-6"><img src="logo/1.png" alt=""></div>
      <div class="col-md-2 col-sm-4 col-xs-6"><img src="logo/2.png" alt=""></div>
      <div class="col-md-2 col-sm-4 col-xs-6"><img src="logo/3.png" alt=""></div>
      <div class="col-md-2 col-sm-4 col-xs-6"><img src="logo/4.png" alt=""></div>
      <div class="col-md-2 col-sm-4 col-xs-6"><img src="logo/5.png" alt=""></div>
      <div class="col-md-2 col-sm-4 col-xs-6"><img src="logo/6.png" alt=""></div>
</div>


Они работают отлично. Но! Разве в bootstrap каждая строка не должна содержать в себе именно 12 колонок? Почему тогда sm состоит из 24, а хs из 6? Я что-то неправильно понимаю в принципах работы bootrstrapa, но что?
  • Вопрос задан
  • 347 просмотров
Решения вопроса 1
Ты правильно понял. Одна строка это 12 колонок. Если сумма колонок превышает 12, последний переходит на новую строку

md - все 6 элементов в одну строку.
sm - по 3 элемента на строку, 2 строки получится.
xs - по 2 элемента на строку, 3 строки получится
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@WQP
Блоки которые не вмещаются в 12 колонок переносятся вниз. При этом сохраняют свою ширину
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы