How to align the height of bootstrap columns in the news loop?

Question

css

Help me please. Already screwed up. There is such a code

<div class="container">
  <div class="row">

<!-- Этот блок выводится в цикле (например 12 записей) -->

    <div class="col-md-6">
      Это некая новость
    </div>

<!-- -->

Конец цикла

  </div>
</div>

When displaying news of different lengths, the blocks become different heights
And I need this
Maybe you can somehow display div.clearfix after every second block

Answer 1

codepen.io/STutukov/pen/grgZrW

Answer 2

Используя именно бутстрап - никак. Колонки в CSS не предполагают одинаковости высот. Дизайнеры об этом не догадывались, не догадываются и никогда не догадаются. Поэтому вам придётся переопределять бутстраповские стили:

.container.container-as-table {
  display: table;

  width: 100%;
  border-collapse: collapse;
}

.container-as-table .row {
  display: table-row;
}

.container-as-table .col {
  display: table-cell;
}

Answer 3

Можно на row повесить класс flex-row

@media only screen and (min-width : 768px) {
    .flex-row.row {
        display: flex;
        flex-wrap: wrap;
    }
    .flex-row.row > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }
}

Answer 4

в цикле есть счетчик i (ну или что там у вас)
if (i%2 == 0){
//четное
//деление на два без остатка
}
если счетчик нечетный выводить

<div class="row">
    <div class="col-md-6">
      Это некая новость
    </div>
здесь нет закрывающего тега див

если счетчик четный выводить

<div class="col-md-6">
      Это некая новость
    </div>
    </div>
здесь второй закрывающий див, но нет div.row

Answer 5

я сделал проще

<div class="col-xs12">
<div class="col-md-4">Новость</div>
<div class="col-md-4">Новость</div>
<div class="col-md-4">Новость</div>
</div>
<div class="col-xs12">
<div class="col-md-4">Новость</div>
<div class="col-md-4">Новость</div>
<div class="col-md-4">Новость</div>
</div>

Answer 6

The problem is not new, so all solutions have pros and cons of
the solution we use, since it is not custom and does not require additional js styles, etc.
All you need to do is insert a line every 2nd and 3rd element. which is easily done in php in a completely standard way of the engine.
Plus, the solution is simplicity and reliability, any amount of content and complexity of layout inside the div will not affect the result in any way.

<div class="col-lg-4 col-md-6"><div>
<div class="col-lg-4 col-md-6"><div>
          <div class="col-md-12 visible-md">
<div class="col-lg-4 col-md-6"><div>
        <div class="col-lg-12 visible-lg">