Как закончить оставшиеся блоки при отзывчивой в верстке в bootstrap?

Question

[Сергей]

В цикле вывожу записи

<div class='row'>
{% for entitiy in entities %}
<div class='col-md-4'>
{{ entity.caption }}
</div>
{% endfor %}
</div>

в этом примере, когда количество записей в строке меньше 3 - то блок получается незаконченным, из-за чего остальные блоки начинают съезжать... как средствами css исправить эту ситуацию ?

Answer 1

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

Ваш вопрос про CSS, так и приводите CSS, а не кусок скрипта, который вообще к делу имеет слабое отношение.

Проблема с версткой CSS: откуда берется ступенька?
codepen.io/cleric/pen/ECsGK

Comments

[Сергей]

inline-block

Answer 2

[Егор]

Одним сss вряд ли удастся обойтись. Нужны будут дополнительные классы.

Можете менять класс для элементов в цикле, например col-md-6, если 2 блока. Если размеры элементов важны, то можете использовать .col-md-push-* с нужным значением.

Comments

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

Запросто обойтись

[Егор]

Вся соль в 'flex' ?

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

Проблема с версткой CSS: откуда берется ступенька?
Там есть и Inline-block, если присмотреться.

Answer 3

[Дмитрий Евграфович]

после всех колонок поставить. НО если у вас все в row обернуто, то не должно ничего съезжать. Значит какие-то элементы внутри этого блока, либо что-то вне его мешает. Как вам уже сказали - кидайте код верстки