Последняя колонка Bootstrap уходит вправо. Как ее вернуть налево?

Question

[FullstackWEB]

Вот здесь колонка (блок) "Балансировка" почему-то уходит вправо, хотя у всех этих блоков стоит float left.

Как сместить ее влево, где она и должна быть?

Answer 1

[Dmitry Bay]

Оборачивайте каждые два дива .col-sm-6 в .row

Проблема у вас в том, что высота блоков разная, из за этого такой эффект.

Comments

[FullstackWEB]

Разделять на разные `.row` не получится в виду той специфики, что для этого надо вносить изменения в движок + компоненты, писать лишнюю логику (лишние серверные вычисления). Сколько лет работал с колонками Bootstrap, мне казалось что они специально написаны уже так, чтобы не надо было разделять по разным `.row`. И они действительно нормально работали. Взять ту же страницу `about.html`. А вот тут такой казус. Прибегать к JS?

[Dmitry Bay]

FullstackWEB, Какая там лишняя логика то? Ага, сервер помрет от нагрузок.
Есть еще плагин masonry, решает подобную проблему другим способом.

[Dmitry Bay]

FullstackWEB, и да, покажите мне в b3/b4 где работало так как надо? всегда так было, если колонки по высоте не стабильны - они перескакивают дальше, где могут разместиться.
А если вы даете человеческое задание как - надо по 2 колонки в ряд, то и выполнять нужно ее исходя из это потребности.

Answer 2

[Fredd Monty]

Сделай их одной высоты, например:
.service-items .imaged
min-height: 266px;

Comments

[FullstackWEB]

А если то же самое со статьями, где высота из-за их количества символов будет разной? Если я задам высоту принудительно, то какой-то из текстов будет обрезаться. Сколько лет работал с колонками Bootstrap, мне казалось что они специально написаны уже так, чтобы разная высота на их выравнивание никоим образом не влияла. И они действительно нормально работали. Взять ту же страницу `about.html`. А вот тут такой казус. Прибегать к JS?

Answer 3

[FullstackWEB]

Нашел решение. Задать для колонок следующий псевдо-элемент:

&:nth-of-type(2n + 1) {
    clear: both;
}

Также есть решения тут и тут (даже с применением Flex box, но его не тестировал)

Comments

[Dmitry Bay]

Собственно у вас костыль, поздравляю.
col-md-3 у вас не будет уже работать адекватно.

[FullstackWEB]

Dmitry Bay, JS костыльнее. А то что вы написали, решается медиа-запросами (col-md-3 сделать для min-width: 992px, при необходимости col-lg для 1200+)

[Dmitry Bay]

FullstackWEB, значит вы не поняли суть бутстрапа и библиотек.
Вот придет следующий программист, а потом думать будет, почему у него стандартная структура html тегов не работает.

И да, у вас же вроде b4 был? так вот посмотрите примеры, как используется структура .row>col* в b4.