Как выровнять высоту колонок bootstrap в цикле новостей?

Question

[Александр]

Помогите пожалуйста. Запарился уже. Есть такой код

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

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

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

<!-- -->

Конец цикла

	</div>
</div>

При выводе новостей разной длины блоки становятся разной высоты
А мне нужно это

Может можно как-то после каждого второго блока вывести div.clearfix

Comments

[Святослав Торг]

А пробовал рядом с col-md-6 гаписать clearfix, чтобы у каждого дива он был

[Святослав Торг]

Class="col-md-6 clearfix"

[Святослав Торг]

Лучше наверное для каждого ряда новый row

[Александр]

Святослав Торг: Та нет. Это не то

[Александр]

Святослав Торг: блоки в цикле - нельзя row добавить для каждого ряда

[Святослав Торг]

Дак ты в цикле выведи сначала запист 0; и 1; цикл офф, второй row новый цикл начинает с записи 2, а первоначальную выборку сортируй как надо, из массива записи доставай) может так

Answer 1

[GreatRash]

Используя именно бутстрап - никак. Колонки в 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;
}

Comments

[Евгений]

может flex?

[GreatRash]

Nc_Soft: А в чём будет разница?

[Евгений]

GreatRash: можно и через table сверстать, в чем разница

[GreatRash]

Nc_Soft: Разница в том, что через <table> нельзя будет абсолютом внутри элементы позиционировать, а внутри <div style="display: table;"> - можно. А в остальном да - разницы нет.

Answer 2

[Евгений]

Можно на 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 3

[Александр]

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

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

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

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

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

Answer 4

[alex_ok83]

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

<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 5

[Виктор Таран]

Проблема не нова, так что все решения имеют плюсы и минусы
решение которое используем мы, поскольку оно не кастомное и не требует дополнительных стилей js и тд
Все что нужно сделать это каждый 2 и 3 элемент вставлять строку. что с легкостью делается на php совершенно штатным способом движка
Плюс решения простота и надежность, любое количество контента и сложность верстки внутри дива никак не повлияют на результат.

<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">