Высота блоков в bootstrap ломает верстку

В верстки используется bootstrap. На странице выводиться дочерние документы в виде блоков:

[[pdoResources? &parents=`25` &depth=`0` &tpl=`Шаблон &limit=`0` &includeTVs=`Изображение` &tvPrefix=`tv.` &prepareTVs=`1` &processTVs=`1` &includeContent=`1` ]]
<div class="col-md-4">
	<a href="[[~[[+id]]]]">[[+Изображение]]</a>
    <h2><a href="[[~[[+id]]]]">[[+pagetitle]]</a></h2>
	<div class="content">[[+content:ellipsis=`350` :WholeWords]]</div>
    <p><span class="date">[[+publishedon:date=`%d.%m.%Y`]]</span></p>
</div>
Проблема в том, что из-за разной высоты блоков ломается верстка. На высоту влияет длина заголовка, но ограничить длину по символам — нельзя.

Можно ли решить такими способами?
1) Написать такой вывод по шаблону, чтобы через каждые 3 блока вставлялся код?
<div class="clearfix"></div>
2) Решения на CSS или JS?
Сергей
15 февраля 2017, 09:30
1
744
0

Комментарии: 8

Petr Golovatyy
15 февраля 2017, 13:04
+1
посмотрите Общие параметры pdoTools, раздел Параметры шаблонов.
    Сергей
    15 февраля 2017, 16:40
    0
    Спасибо. Попробую найти, что мне нужно.
Alexei
15 февраля 2017, 13:14
+1
2) есть простое решение на css, поставьте родительскому контейнеру display: flex
    Сергей
    15 февраля 2017, 16:43
    0
    Работает так:
    display: flex;
    flex-wrap: wrap;
    Но, в мобильной версии перестает работать класс «img-responsive», изображения перестают адаптироваться.
Kirill A. Rusanov
15 февраля 2017, 14:08
1
+1
flex или если боитесь нового
.col-md-4::nth-child(3n+1) { clear: left; }
    Alexei
    15 февраля 2017, 15:27
    +1
    игра с clear может довести до бешенства, актуально когда используется больше media условий, типо:
    class=«col-sm-6 col-md-4 col-lg-3»

    Вот тут веселуха начнется, с убиванием старого клира, и добавление его на новый nth-child
    Сергей
    15 февраля 2017, 16:54
    0
    Добавил в css:
    .col-md-4::nth-child(3n+1) { clear: left; }
    Не работает.
Stan Ezersky
15 февраля 2017, 17:58
+2
Тут предусмотрено решение