S
S
Super Star2016-05-24 22:53:39
css
Super Star, 2016-05-24 22:53:39

I can't put 5 pictures with a gap in one section of 12 columns. Bootstrap?

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

Answer the question

In order to leave comments, you need to log in

3 answer(s)
Сергей delphinpro, 2016-05-24
@3dben

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

Андрей, 2016-05-25
@AndreyMyagkov

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

Виктор Таран, 2016-05-25
@shambler81

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question