Высота блоков в 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
modx.pro
4 423

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

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

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