我尝试使用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个项目 Package 在.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网格(使它们居中)?
7条答案
按热度按时间mi7gmzs61#
我喜欢你的问题,因为我正在处理一个非常相似的情况。由于其他答案有点长,我决定把我的留在这里供你考虑。对我来说,你使用的变量越少,解决方案就越好。
BootstrapContentArranger.php
测试用例
1.3项,输出:
1.11项,输出:
1.单项,输出:
注意:你可以去掉
PHP_EOL
,我用它来更好的阅读源码。x33g5p2x2#
每次我需要这样做时,我只是使用
array_chunk
为我的行和列构建一个合适的数组块。例如,您有:
$posts = [['id' => 1], ['id' => 2] ...]
与其循环计算是否添加行,不如将你的帖子分成块:
whitzsjs3#
我想我找到了解决方案,首先找到了最后一行开始的项目,并将适当的列号应用于该行中的所有项目:
优点是任何数字(可被12整除)都可以添加到
$max_columns
,并且它将应用适当的列。n3h0vuf24#
你为什么不计算你的模?
uinbv5nw5#
一次打印一行,根据行的填充程度确定每个元素的HTML类;for 0 col-md-4,for 1 col-md-12...你需要一些helper结构。最后打印最后一行,如果缓冲区中有东西。
jfgube3f6#
sg3maiej7#
对于那些不希望元素跨越所有列而只是一个简单网格的人来说,下面是如何在中实现的。
结果