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

Добрый вечер!
9bddd17683f84d9585265dee82b966a2.png
Не хочется, чтобы элемент так далеко упрагивал.
Как избежать такого расположения элементов?
Одна строка, в которой несколько элементов.
Если разделять на несколько строк, то придется делать строку для 3х элементов, а потом и для 2х и для 1ого. Есть ли более элегантное решение? (не обязательно используемое в bootstrap)
Спасибо!
Код:
.row
  .col-lg-3
  .col-lg-3
  .col-lg-3
  .col-lg-3
  .col-lg-3
  • Вопрос задан
  • 211 просмотров
Решения вопроса 2
seoperin
@seoperin
Full stack web developer. Laravel / Vue
Посмотрите в сторону flexbox (это не в бутстрапе)
Ответ написан
Santana
@Santana
Веб-дизайнер и немного front-end dev. Учу Rails.
Можно добавить clear: left; каждому первому блоку в новом ряду. Если у нас 4 колонки, это будет

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

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы