Я пытаюсь создать следующий интерфейс, используя петлю PHP и щелевую сетку Twitter Bootstrap 12:
Вывод HTML:
<div class="row">
<div class="col-lg-4">
Content...
</div>
<div class="col-lg-4">
Content...
</div>
<div class="col-lg-4">
Content...
</div>
</div>
<div class="row">
<div class="col-lg-4">
Content...
</div>
<div class="col-lg-4">
Content...
</div>
<div class="col-lg-4">
Content...
</div>
</div>
<div class="row">
<div class="col-lg-6">
Content...
</div>
<div class="col-lg-6">
Content...
</div>
</div>
В PHP (WordPress) я обертываю каждые 3 элемента в .row
div:
<?php $i=0; // counter ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php if ($i%3==0) { // if counter is multiple of 3 ?>
<div class="row">
<?php } ?>
<div class="col-md-4">
Content...
</div>
<?php $i++; ?>
<?php if($i%3==0) { // if counter is multiple of 3 ?>
</div>
<?php } ?>
<?php endwhile; ?>
<?php if($i%3!=0) { // put closing div if loop is not exactly a multiple of 3 ?>
</div>
<?php } ?>
Проблема:
Я не знаю, как добавить соответствующий номер столбца в элементы последней строки, чтобы они заполнили 12 столбцов.
Например, на моей иллюстрации выше каждого элемента в последней строке есть col-6
(расширяет 6 столбцов), заполняя 12 сетчатую систему. В качестве другого примера, если в последней строке было 1 элемент, он должен иметь col-12
.
Примечание. каждая строка имеет не более 3 элементов, как показано на рисунке и на PHP.
Я знаю следующее:
-
Общее количество элементов
$loop->post_count
-
Номер позиции
$i
-
Число оставшихся элементов в последней строке
$loop->post_count%3
(я думаю) -
Общее количество столбцов
12
(12 можно разделить на количество оставшихся элементов, чтобы определить номер столбца, чтобы дать им)
Вопрос:
Как я могу использовать эти данные в PHP выше, чтобы изменить номер столбца элементов в последней строке, чтобы они заполнили 12 сетки (сделав их центрированными)?