Bootstrap и 5 элементов в ряд?

Question

[n6jWER33E33jSK8s n6jWER33E33jSK8s]

Доброго времени суток!

Помогите пожалуйста, каким образом можно разместить 5 элементов в ряд и чтоб это выглядело нормально ?
Вот как должно выйти:



Спасибо за предложения или догадки.

Comments

[WapSter]

Bootstrap и даже 20% всей вариативности разработки покрыть не может, обязательно к нему так привязываться?

Answer 1

[dicem]

Извини, а зачем тут вобще bootstrap?
На родительский блок:

display: flex;
justify-content: space-between;
align-items: center;

Comments

[Alex XYZ]

Скажите, а давно эти свойства существуют?

[hzzzzl]

Захаров Александр, так бутстрап же все равно на флексах вроде как

[Alex XYZ]

Просто я раньше не осознавал, что такая штука нормально реализована (не часто сталкиваюсь с HTML, но наконец-то я это выравнивание узрел). Благодарен вам, что явно показали. )))

[dicem]

Захаров Александр, давненько уже, вон как уже говорили новый бутстрап активно использует флексбокс, советую почитать на досуге про flex

[Alex XYZ]

dicem, Ох, постараюсь внять вашему совету. Всё не могу себя заставить. Просто сама система выравниваний в HTML ну ооочень слабая (по моему личному мнению).

[dicem]

Захаров Александр, оу, ну в html то особо то уже никто и не выравнивает, вы наверняка имели ввиду CSS, но и тут ваше заявление весьма сомнительно, есть отличная статья от frontenderMagazine https://frontender.info/centering-css-complete-guide/ также отличная статья по флексам https://frontender.info/a-guide-to-flexbox/

Отлично дает понимание по позиционированию блоков в CSS.

[Alex XYZ]

dicem, Спасибо за ссылки. Но даже в них видны недостатки. Примеры даны только для одного уровня вложенности объектов. На основе второй ссылки, пример, который, меня, честно, ставит в тупик:


Только я прошу вас не считайте это "провокацией", что ли. Просто как пример нестандартного запроса пользователей. А завтра тот же пользователь придёт и попросит "- Ой, ой! Относительно зелёного НАДА".

[dicem]

Захаров Александр, Тогда на такой пример нестандартных запросов я попрошу чуть более ясно сформулировать требования ибо сейчас я даже со скрином немного не понимаю что к примеру может понадобится :D

[Alex XYZ]

dicem, Простите за паузы. Работа. ) Вот в таком виде будет попонятнее?


Просто внутри блоков много способов выравнивания, а если нужно хоть немного вылезти "наружу", то всё...

Answer 2

[Эдуард Баженов]

Разделить ваши блоки на 12 колонок, т.е. задать каждому блоку такое кол-во колонок, чтобы в сумме было 12, например:
.col-sm-3+.col-sm-2+.col-sm-3+.col-sm-2+.col-sm-2