Как настроить вывод комментариев?

Question

[Сергей]

Подскажите как исправить, уже весь мозг сломал

на скрине видно, что третий комментарий вывелся под вторым, а должен был под первым, а уже четвёртый под вторым и т.д.

<div class="col-md-6">
  <div class="testimonial-section-box">
    <div class="row">
      <div class="col-md-2 col-sm-2 col-xs-2"><img src="{foto}" class="img-responsive img-circle" alt="testimonial1"></div>
      <div class="col-md-10 col-sm-10 col-xs-10">
        <h5 class="client-name">{author}</h5>
        <div class="client-text">{comment}</div>
      </div>
    </div>
  </div>

.testimonial-section-box {
  margin-bottom: 40px;
  margin-left: -8px;
}

.client-name {
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.client-text {
  font-size: 15px;
  margin: 0 0 20px;
  line-height: 26px;
}

.col-md-6 {
  width: 50%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

Answer 1

[hesrun]

Проблема в том что для .col-md-6 у вас флоат прописан.
И третий коммент перекидуется вправо, т.к. левый больший по высоте.
Судя по классам вы используете бутстрап, если более поздняя версия у которого используются флексы, то тогда флоат не нужен и ширина соответственно тоже.

Или тогда каждые два комента оборачивайте в .row и очищайте поток с clearfix. На самом деле странно, что у вас до сих пор флоаты...

Comments

[Сергей]

а не могли бы вы мой код подправить, а то я уже и с clearfix все варианты перепробовал и единственное чего смог добиться, так это отображения друг под другом всех комментариев, но по сути это можно и просто применив класс .col-md-12 сделать, а мне нужно чтобы по два комментария в строке было, очень надеюсь, что вы поможете

[hesrun]

У вас должно быть так:
.row
.col-md-6
.col-md-6
.col-md-6

.col-md-6 {
width: 50%;
float: left;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
} и если это вы писали то удалите. не нужно переназначать стили сетки, по крайней мере пока вы не разберетесь зачем это

Answer 2

[Dmitry Bay]

В b3 можно использовать div.clearfix с дополнительным классом видимости в md.

А еще можно оборачивать каждые 2 col-md-6 в .row.

Comments

[Сергей]

а не могли бы вы мой код подправить, а то я уже и с clearfix все варианты перепробовал и единственное чего смог добиться, так это отображения друг под другом всех комментариев, но по сути это можно и просто применив класс .col-md-12 сделать, а мне нужно чтобы по два комментария в строке было, очень надеюсь, что вы поможете

[Dmitry Bay]

Сергей,

<div class="row">
    <div class="col-md-6">
        <!--комментарий-->
    </div>
    <div class="col-md-6">
        <!--комментарий-->
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <!--комментарий-->
    </div>
    <div class="col-md-6">
        <!--комментарий-->
    </div>
</div>

[Сергей]

Dmitry Bay, всё было бы так просто, если бы текст комментариев был написан мной, но это вывод настоящих комментариев тегом {comments} DLE, поэтому таким образом это не реализовать, но спасибо вам за ответ

[Dmitry Bay]

Сергей, но comments то тоже где то подключается.

[Сергей]

Dmitry Bay, да, он подключается, но при дублировании тега, либо если дублировать код его шаблона будут и комментарии дублироваться

[Dmitry Bay]

Сергей, так зайдите туда где он генерируется. там же тоже код есть шаблона...

[Punn1k]

Не понимаю почему не подходит вариант Дмитрия.
Как создание для 2-х коментов отдельного row'a мешает выводу комметов?

[Сергей]

Dmitry Bay, Punn1k, так не сработает, потому что вот генерация кода комментариев по примеру Дмитрия

<div class="col-md-6">
    <div class="testimonial-section-box">
            <div class="col-md-2 col-sm-2 col-xs-2"><img src="{foto}" class="img-responsive img-circle" alt="testimonial1"></div>
            <div class="col-md-10 col-sm-10 col-xs-10">
                <h5 class="client-name">{author}</h5>
                <div class="client-text">{comment}</div>
        </div>  
    </div> 
</div>
<div class="col-md-6">
    <div class="testimonial-section-box">
            <div class="col-md-2 col-sm-2 col-xs-2"><img src="{foto}" class="img-responsive img-circle" alt="testimonial1"></div>
            <div class="col-md-10 col-sm-10 col-xs-10">
                <h5 class="client-name">{author}</h5>
                <div class="client-text">{comment}</div>
        </div>  
    </div> 
</div>

так комметарии выводятся на странице

<div class="row">
       {comments}
</div>

И вот как этот код работает,

отображается верно, если не учитывать генерации двух одинаковых комментариев, так что пока что вышел из ситуации совсем не верным методом, но действенным, просто задав высоту блоков

[Dmitry Bay]

Все в праве делать костыли.

Изучайте DLE подробнее, чтобы на решение задачи у вас не возникало дополнительных вопросов, на которые вы не планируете отвечать, делая себе костыли.