Не могу в одну секцию из 12 колонок вложить 5 картинок с промежутком. Bootstrap?

Question

[Super Star]

Здравствуйте. У меня не получается сверстать секцию(учусь). Нужно в секции установить 5 картинок с промежутком естественно, но у меня не выходит. Если разбить по 2-е колонки - получается слитно, а если по 3 колонки то 4 штуки стоят вряд с промежутками. а одна картинка на уровень ниже Ткните носом пожалуйста. Нужно вот так: https://wireframe.cc/sQUgWN

Answer 1

[Сергей delphinpro]

<div class=section>
  <img src="">
  <img src="">
  <img src="">
  <img src="">
  <img src="">
</div>

.section {
  display: flex;
  justify-content: space-around;
  img {
    max-width: 20%; // опционально
  }
}

Казалось бы, причем здесь bootstrap?..

Comments

[Дастан]

А как насчет поддержки браузерами display:flex ?

[Сергей delphinpro]

Дастан: Поддержка отличная caniuse.com/#search=flex

Answer 2

[Андрей]

У вас 12 колоночная сетка. Чисто логически засунуть 5 картинок с промежутком не получится).
Вывод:
1) либо использовать 5, 10 или 15 колоночную сетку. Но это плохой путь.
2) либо сделать так, как написал Срегей или аналогичным способом, вобщем не используя сетку

Comments

[Super Star]

спасибо за совет

Answer 3

[Виктор Таран]

На самом деле решений несколько
1. 12 действительно не делится на 5, это помоему уже все знают.
2. Использовать container-fluid и там сделать отступы по 1 колонке тогда у вас остается 10 что хорошо делится на 5 но так сказать это решение имеет свои минусы.
3. Скомпилить себе 15 колонок - но это bootstrap-3.ru/customize.php - но это штатный но всеже кастом бутстрапа. я вообще своим запрещяю трогать эти файлы.
4. отказаться в этом диве от бутстрапа и сверстать в нем обычной класической версткой - но тут теряете адаптив ну или нужно хорошо сверстать.

можно придумать еще с десяток вариантов, но все они сводятся к мысле что 12 на 5 всеже не делится.