我正在尝试使用 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 个项目包装在 .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 格(使它们居中)？

最佳答案

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

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>

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

1. 单个项目，输出:

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

注意:您可以删除PHP_EOL，我用它来更好地阅读源代码。

关于php - 使用 PHP 循环向元素添加 Bootstrap 行和适当的列号，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32766409/