我正在尝试使用 PHP 循环和 Twitter Bootstrap 的 12 列网格系统创建以下前端:
HTML 输出是:
<div class="col-lg-4">内容...<div class="col-lg-4">内容...
<div class="col-lg-4">内容...
<div class="row"><div class="col-lg-4">内容...
<div class="col-lg-4">内容...
<div class="col-lg-4">内容...
<div class="row"><div class="col-lg-6">内容...
<div class="col-lg-6">内容...
在 PHP (WordPress) 中，我将每 3 个项目包装在 .row div 中:
<?php while ( have_posts() ) : the_post();?><?php if ($i%3==0) {//如果计数器是 3 的倍数 ?><div class="row"><?php } ?><div class="col-md-4">内容...<?php $i++;?><?php if($i%3==0) {//如果计数器是 3 的倍数 ?>
<?php } ?><?php endwhile;?><?php if($i%3!=0) {//如果循环不是 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 个网格(使它们居中)?
我想我找到了解决方案，首先找到最后一行从哪个项目开始，然后将适当的列号应用到该行中的所有项目:
post_count;$remainder = $loop->post_count%$max_columns;//最后一行有多少项$first_row_item = ($total_items - $remainder);//最后一行的第一项?><?php $i=0;//计数器 ?><?php while ( have_posts() ) : the_post();?><?php if ($i%$max_columns==0) {//如果计数器是 3 的倍数 ?><div class="row"><?php } ?><?php if ($i >= $first_row_item) {//如果在最后一行?><div class="col-md-<?php echo 12/$remainder; ?>"><?php } else { ?><div class="col-md-<?php echo $column; ?>"><?php } ?>内容...<?php $i++;?><?php if($i%$max_columns==0) {//如果计数器是 3 的倍数 ?>
<?php } ?><?php endwhile;?><?php if($i%$max_columns!=0) {//如果循环不是 3 的倍数，则关闭 div ?>
<?php } ?>
优点是可以将任何数字(可被 12 整除)添加到 $max_columns 并且它将应用适当的列.
I'm trying to create the following front-end using a PHP loop and Twitter Bootstrap's 12 column grid system:
The HTML output is:
<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>
In PHP (WordPress) I'm wrapping every 3 items in a .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 } ?>
I don't know how to add the appropriate column number to the items in the last row so that they fill the 12 column grid.
For example, in my illustration above each item in the last row has col-6 (expands 6 columns) filling the 12 grid system. As another example, if there was 1 item in the last row it should have col-12.
Note: each row has 3 items at most as shown in the illustration and in PHP.
I know the following:
Total number of items $loop->post_count
Item number $i
Number of remainder items in the last row $loop->post_count%3 (I think)
Total number of columns 12 (12 could be divided by the number of remainder items to figure out the column number to give them)
Question:
How can I use that data in the PHP above to change the column number of the items in the last row so that they will fill the 12 grid (making them them centered)?
I think I found the solution by first finding at which item the last row starts and applying the appropriate column number to all the items in that row:
<?php
$max_columns = 3; //columns will arrange to any number (as long as it is evenly divisible by 12)
$column = 12/$max_columns; //column number
$total_items = $loop->post_count;
$remainder = $loop->post_count%$max_columns; //how many items are in the last row
$first_row_item = ($total_items - $remainder); //first item in the last row
?>
<?php $i=0; // counter ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php if ($i%$max_columns==0) { // if counter is multiple of 3 ?>
<div class="row">
<?php } ?>
<?php if ($i >= $first_row_item) { //if in last row ?>
<div class="col-md-<?php echo 12/$remainder; ?>">
<?php } else { ?>
<div class="col-md-<?php echo $column; ?>">
<?php } ?>
Content...
</div>
<?php $i++; ?>
<?php if($i%$max_columns==0) { // if counter is multiple of 3 ?>
</div>
<?php } ?>
<?php endwhile; ?>
<?php if($i%$max_columns!=0) { // put closing div if loop is not exactly a multiple of 3 ?>
</div>
<?php } ?>
The advantage is that any number (evenly divisible by 12) can be added to $max_columns and it will apply the proper columns.
这篇关于使用 PHP 循环向元素添加 Bootstrap 行和适当的列号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
