我正在尝试使用
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个网格(使它们居中)？
我喜欢你的问题,因为我正在处理一个非常相似的情况.由于其他答案有点长,我决定把我的留在这里供你考虑.对我来说,你使用的变量越少,解决方案就越好.
BootstrapContentArranger.PHP
<?PHP
function BootstrapContentArrange($i) {
$items = $i; // qnt of items
$rows = ceil($items/3); // rows to fill
$lr = $items%3; // last row items
$lrc = $lr; // counter to last row
while ($items > 0) { // while still have items
$cell = 0;
if ($rows > 1) { // if not last row...
echo '<div class="row">'.PHP_EOL;
while ($cell < 3) { // iterate with 3x4 cols
echo '<div class="col-md-4">Content</div>'.PHP_EOL;
$celL++;
}
echo "</div>".PHP_EOL;
$rows--; // end a row
} elseif ($rows == 1 && $lr > 0) { // if last row and still has items
echo '<div class="row">'.PHP_EOL;
while ($lrc > 0) { // iterate over qnt of remaining items
$lr == 2 ? // is it two?
print('<div class="col-md-6">Content</div>'.PHP_EOL) : // makes 2x6 row
print('<div class="col-md-12">Content</div>'.PHP_EOL); // makes 1x12 row
$lrc--;
}
echo "</div>".PHP_EOL;
break;
} else { // if round qnt of items (exact multiple of 3)
echo '<div class="row">'.PHP_EOL;
while ($cell < 3) { // iterate as usual
echo '<div class="col-md-4">Content</div>'.PHP_EOL;
$celL++;
}
echo "</div>".PHP_EOL;
break;
}
$items--; // decrement items until it's over or it breaks
}
}
测试用例
BootstrapContentArrange(3); BootstrapContentArrange(11); BootstrapContentArrange(1);
> 3项,输出：
<div class="row"> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> </div>
> 11项,产出：
<div class="row"> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> </div> <div class="row"> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> </div> <div class="row"> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> </div> <div class="row"> <div class="col-md-6">Content</div> <div class="col-md-6">Content</div> </div>
>单个项目,输出：
<div class="row"> <div class="col-md-12">Content</div> </div>
注意：你可以删除PHP_EOL,我用它来更好地阅读源代码.