Как сверстать адаптивно 7 элементов в бутстрапе?

Question

[doctorcat]

Приветствую, прошу помощи у профессионалов. Имеется необходимость разместить 7 элементов в одной строке элементы примерно 140 ширина 500 высота. Суть: имеется psd макет где элементы те самые 7 штук не все имею одинаковую ширину и расставлены так что просто смотрятся ровно. Как мне сверстать эти 7 элементов ровно и сделать их адаптивными? Уточню: адаптивно сделать 7 элементов я думаю можно через автоматическое задание ширины на разных разрешениях через javascript например. Но мне кажется я не правильно рассуждаю. Поправьте, наставьте на истинный путь. Всем мир.

Answer 1

[Justin Bieber]

frontender.info/a-guide-to-flexbox

Answer 2

[devstudent]

на экране шириной 320 пикселей не получится разместить 7 блоков в ряд чтобы это выглядело нормально, будут слишком мелкими. и даже на ширине 768 пикс 7 блоков в ряд - перебор, вывод: нужны медиазапросы, меняющие ширину на 50, 30 или 100 %,.Аа на большом экране поставьте им ширину в % и марджин тоже, высчитайте, сколько это будет из расчета 7 блоков . можно поставить ширину в пикс 140 или сколько у вас там, сделать эти блоки inkine-block, и марджин а родителю поставить позиционирование по центру или как там вам надо

Comments

[doctorcat]

хорошо 7 блоков в ряд перебор. но их 7 и как решать этот вопрос? :) дайте совет как опытный программист. Хотя бы, какие варианты? Я тут больше прошу помочь конкретно с логикой действий для решения подобного рода задач.

[devstudent]

doctorcat:все написано в ответе , хотите больше - делайте фиддл

Answer 3

[semki096]

сделайте

<style>
.my_7 {
width: 14.285%;
float: left;
...
}
</style>
<div class="row">
<div class="my-7"></div>
<div class="my-7"></div>
...
<div class="my-7"></div>
</div>

Comments

[doctorcat]

https://jsfiddle.net/zvs8v6zf/ что не так делаю?