Как справиться с некорректным размещением элементов в сетке bootstrap?

Question

[Вячеслав Лебедев]

Добрый вечер!

Не хочется, чтобы элемент так далеко упрагивал.
Как избежать такого расположения элементов?
Одна строка, в которой несколько элементов.
Если разделять на несколько строк, то придется делать строку для 3х элементов, а потом и для 2х и для 1ого. Есть ли более элегантное решение? (не обязательно используемое в bootstrap)
Спасибо!
Код:

.row
  .col-lg-3
  .col-lg-3
  .col-lg-3
  .col-lg-3
  .col-lg-3

Answer 1

[Евгений Перин]

Посмотрите в сторону flexbox (это не в бутстрапе)

Comments

[Вячеслав Лебедев]

Спасибо!

Answer 2

[Сергей Педан]

Можно добавить clear: left; каждому первому блоку в новом ряду. Если у нас 4 колонки, это будет

.grid-row .col-lg-3:nth-child(4n+1) { clear: left; }

(В .grid-row нужно завернуть, чтобы не присвоить вообще всем .col-lg-3 что не нужно)

Также можно просто выставить всем блокам фиксированную высоту, а лишний контент обрезать программно или средствами того же бутстрапа (где-то в разделе JS).

Ещё есть офигенный SASS-плагин Susy. С помощью него можно строить такие плитки. Но он довольно сложный в изучении, и его надо компилировать. Но он крут.