使用 PHP 循环向元素添加引导行和正确的列号答案

【问题标题】：Using PHP loop to add Bootstrap rows and proper column numbers to elements使用 PHP 循环向元素添加引导行和正确的列号
【发布时间】：2015-12-22 08:31:34
【问题描述】：

我正在尝试使用 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 个网格（使它们居中）？

【问题讨论】：

最后一行是否总是有 6-6，或者它们可能是 3-3-3-3，或 4-4-4，甚至是 2-10、3-9、12.. . ?
@AlanMachado 每行最多有 3 个项目
@AlanMachado 它们可以是 4-4-4 或 6-6 或 12。它们必须相等，因此例如 2-10 不会是这种情况
@AlanMachado 不会有 8 个剩余项目，因为在 PHP 中我将每 3 个项目包装在 row 中。所以每行最多 3 个项目。
“最后一行中的每个项目都有 col-6（扩展 6 列），使它们在 12 网格系统中居中” - 不是真的，因为 6+6 是 12 ，它们将占据整行。您的示例图像与您的代码不匹配 - 要实现这一点，您需要两列 4 和 offset 第一个 2。

标签： php html wordpress loops twitter-bootstrap-3

【解决方案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);

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_EOL，我用它来更好地阅读源码。

【讨论】：

谢谢，这与我的解决方案类似。你说得对，变量越少越好。

【解决方案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>
}

【讨论】：

嗨@dpitkevics，你能帮我解决这个问题吗stackoverflow.com/questions/58764048/…

【解决方案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，并且它将应用正确的列。

【讨论】：

【解决方案4】：

你为什么不评估你的模数？

$two = false; 
if($i%3 == 2)
{
      <div class="col-md-6">
         Content...
      </div>
      $two = true;  
}

if($i%3 == 1)
{
      if($two)
      {
          <div class="col-md-6">
              Content...
          </div>
      }
      else
      {
          <div class="col-md-12">
              Content...
          </div>              
      }          
}

【讨论】：

【解决方案5】：

一次打印一行，根据行的填充程度确定每个元素的 html 类；对于 0 col-md-4，对于 1 col-md-12 ...您需要一些辅助结构。如果缓冲区中有东西，最后打印最后一行。

/**
 * Prints the row in a grid
 * @param array $posts
 * @param string $class
 */
function printRow($posts, $class) {
    echo '<div class="row">';

    foreach ($posts as $post) {
        echo '<div class="' . $class . '">' . $post . '</div>';
    }

    echo '</div>';
}

$i = 0;
$htmlClasses = ['col-md-4', 'col-md-12', 'col-md-6']; //helper for setting html classes
$buffer = []; //helper array to hold row elements

while (have_posts()) {
    the_post();
    $i++;

    $mod = $i % 3;

    //determine html class
    $htmlClass = $htmlClasses[$mod];

    if ($mod > 0) {
        $buffer[] = $currentPost; //this is the post content
    } else {
        printRow($buffer, $htmlClass);
        $buffer = [];
    }
}

//printing final row if there are elements
if (!empty($buffer)) {
    printRow($buffer, $htmlClass);
}

【讨论】：

【解决方案6】：

        <?php
            //total products or items you have
            $total_pr = count($products);

            //grid of columns you want 
            $grid = 3;
            $tol_raw = ceil($total_pr / $grid);
            $count =0;
        ?>


        <?php for($i=0;$i<$tol_raw;$i++): ?>
            <?php

            $repeat = $grid;
            if($total_pr<$grid)$repeat = $total_pr;
            $total_pr -= $repeat;

            ?>
            <div class="row">
                <?php for($pr=0;$pr<$repeat;$pr++):?>
                    <?php $product = $products[$count]; ?>
                     <!-- column selection is based onn your grid -->
                    <div class="col-md-4">
                         //do whatever you want to do here
                    </div>
                    <?php $count++; ?>
                <?php endfor; ?>
            </div>
        <?php endfor; ?>

【讨论】：