使用PHP循环将Bootstrap行和正确的列号添加到元素

Question

我正在尝试使用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个项目包装在一个.rowdiv中:

<?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个网格(使它们居中)？

Answer 1

我喜欢你的问题,因为我正在处理一个非常相似的情况.由于其他答案有点长,我决定将我的留在这里供你考虑.对我来说,你使用的变量越少,解决方案就越好.

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);

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>

2. 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>

3. 单个项目,输出:

<div class="row">
<div class="col-md-12">Content</div>
</div>

注意:你可以删除PHP_EOL,我用它来更好地阅读源代码.

Answer 2

每次我需要这个时,我只是用来array_chunk为我的行和列构建一个合适的数组块.

例如你有:

$posts = [['id' => 1], ['id' => 2] ...]

不是循环和计算是否添加行,而是制作帖子的块:

$posts = [['id' => 1], ['id' => 2] ...]

$postChunks = array_chunk($posts, 4); // 4 is used to have 4 items in a row
foreach ($postChunks as $posts) {
    <div class="row">
        foreach ($posts as $post) {
            <div class="col-md-3">
                <?=$post['id'];?>
            </div>     
        }
    </div>
}

Answer 3

我想我找到了解决方案，首先找到最后一行开始的项目并将适当的列号应用于该行中的所有项目：

<?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 } ?>

优点是可以添加任何数字（可被 12 整除），$max_columns并且它将应用适当的列。