脚本宝典收集整理的这篇文章主要介绍了使用PHP循环将Bootstrap行和正确的列号添加到元素，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
<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可以除以剩余项目的数量,以计算列号以给出它们)
题：
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循环将Bootstrap行和正确的列号添加到元素全部内容，希望文章能够帮你解决使用PHP循环将Bootstrap行和正确的列号添加到元素所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。