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

Дополнение: pdoResources

В верстки используется 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, 12:30    Сергей   
1    326 0

Комментарии (8)

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

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