使用PHP循环将Bootstrap行和适当的列号添加到元素 [英] Using PHP loop to add Bootstrap rows and proper column numbers to elements

问题描述

我正在尝试使用PHP循环和Twitter Bootstrap的12列网格系统创建以下前端：

HTML输出为：

 < div class =row> ; 
< div class =col-lg-4> 
内容... 
< / div> 
< div class =col-lg-4> 
内容... 
< / div> 
< div class =col-lg-4> 
内容... 
< / div> 
< / div> 
 
< div class =row> 
< div class =col-lg-4> 
内容... 
< / div> 
< div class =col-lg-4> 
内容... 
< / div> 
< div class =col-lg-4> 
内容... 
< / div> 
< / div> 
 
< div class =row> 
< div class =col-lg-6> 
内容... 
< / div> 
< div class =col-lg-6> 
内容... 
< / div> 
< / div> 
  

在PHP（WordPress）中，我将每3个项目包装在中。 row div：

 <？php $ i = 0; // counter？> 
 
 <？php while（have_posts（））：the_post（）; ？> 
 
 <？php if（$ i％3 == 0）{//如果counter是3的倍数>> 
< div class =row> 
<？php}？> 
 
< div class =col-md-4> 
内容... 
< / div> 
 
<？php $ i ++; ？> 
 
 <？php if（$ i％3 == 0）{//如果counter是3的倍数>> 
< / div> 
<？php}？> 
 
 <？php endwhile; ？> 
 
 <？php if（$ i％3！= 0）{//如果loop不是3的整数，则放置div div>> 
< / div> 
<？php}？> 
  

问题：

我不知道如何将相应的列号添加到最后一行中的项目，以便填充12列网格。

例如，在上图中，最后一行中的每个项目都有 col-6 （展开6列）填充12个网格系统。作为另一个例子，如果最后一行有1个项目，它应该有 col-12 。

注意：每行最多有3项，如图所示和PHP中所示。

我知道以下内容： 物品总数 $ loop-> post_count

物品编号 $ i

最后一行的余项数量 $ loop-> post_count％3 （我认为）

总列数 12 除以剩余项目的数目以找出列号以给予它们）

问题：

如何在上面的PHP中使用该数据来更改最后一行中的项目的列号，以便它们填充12个网格让他们居中）？

解决方案

我想我找到了解决方案，首先找到最后一行开始的哪个项目，适当的列号给该行中的所有项目：

 <？php 
 $ max_columns = 3; //列将排列成任意数字（只要它可以被12整除）
 $ column = 12 / $ max_columns; //列号
 $ total_items = $ loop-> post_count; 
 $ remaining = $ loop-> post_count％$ max_columns; //最后一行有多少项目
 $ first_row_item =（$ total_items  -  $ remaining）; //最后一行中的第一项
？> 
 
<？php $ i = 0; // counter？> 
 
 <？php while（have_posts（））：the_post（）; ？> 
 
 <？php if（$ i％$ max_columns == 0）{//如果counter是3的倍数>> 
< div class =row> 
<？php}？> 
 
 <？php if（$ i> = $ first_row_item）{//如果在最后一行？>> 
< div class =col-md-<？php echo 12 / $ remaining;？>> 
<？php} else {？> 
< div class =col-md-<？php echo $ column;？>> 
<？php}？> 
内容... 
< / div> 
 
<？php $ i ++; ？> 
 
 <？php if（$ i％$ max_columns == 0）{//如果counter是3的倍数>> 
< / div> 
<？php}？> 
 
 <？php endwhile; ？> 
 
 <？php if（$ i％$ max_columns！= 0）{//如果loop不是3的整数，则放置div div>> 
< / 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 } ?>

The Problem:

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屋！