每3列在引导程序中循环行

Question

我希望页面中的每一行都能显示3个缩略图,但它会堆叠成一行.

如何管理循环？谢谢...

<?php
    foreach ($rows as $row){
?>  
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="user_file/<?php echo $row->foto; ?>">
            </div>
        </div>

<?php
}
?>

此代码生成堆叠的缩略图.如何为每3列生成一行？

这个截图是我从代码中获得的:

这是我想要得到的:

Answer 1

编辑:最初我从头顶快速发布了这个.感谢Wael Assaf指出我已经使用过的改进.此外,我添加了一些代码更改,现在它是多功能的,可用于通过更改变量$ numOfCols可以选择的可变数量的列

您需要为每行添加一个div.然后你拥有的浮动div,不会只是环绕,而是将在他们自己的容器中.

bootstrap类row非常适合:

<?php
//Columns must be a factor of 12 (1,2,3,4,6,12)
$numOfCols = 4;
$rowCount = 0;
$bootstrapColWidth = 12 / $numOfCols;
?>
<div class="row">
<?php
foreach ($rows as $row){
?>  
        <div class="col-md-<?php echo $bootstrapColWidth; ?>">
            <div class="thumbnail">
                <img src="user_file/<?php echo $row->foto; ?>">
            </div>
        </div>
<?php
    $rowCount++;
    if($rowCount % $numOfCols == 0) echo '</div><div class="row">';
}
?>
</div>

使用php模数运算符来回显正确点处每行的打开和关闭.

希望这可以帮助.

Answer 2

您可以使用array_chunk(input array, size of each chunk)函数将数组分块.
php.net手册:array_chunk

将数组块化为具有大小元素的数组.最后一个块可能包含小于size的元素.

这是一个例子:

<?php

    $numberOfColumns = 3;
    $bootstrapColWidth = 12 / $numberOfColumns ;

    $arrayChunks = array_chunk($items, $numberOfColumns);
    foreach($arrayChunks as $items) {
        echo '<div class="row">';
        foreach($items as $item) {
            echo '<div class="col-md-'.$bootstrapColWidth.'">';
            // your item
            echo '</div>';
        }
        echo '</div>';
    }  
?>

Answer 3

首先你应该定义一个变量,然后在循环结束之前增加它并回显结束行标记并根据它打开另一个变量.

有用的步骤

• 限定 $i = 0;
• 在循环内部制作你的回声.
• 在foreach结束之前增加$i++并创建一个条件:如果$i % 3 == 0然后回显行的结束标记然后生成一个新行.

代码:

<div class='row'>
<?php
foreach($items as $item) {
  echo "<div class='col-lg-2'>";
      echo "<div class='item'>";
        echo 'Anythin';
      echo '</div>';
  echo '</div>';
  $i++;
  if ($i % 3 == 0) {echo '</div><div class="row">';}
}
?>
</div>

提示:你真的不想要排除这一行,这是一个坏主意,做一行并预先处理这些项目.

Answer 4

无需所有这些复杂性。Bootstrap自动在12列网格系统中工作。只需确保循环并设置col大小，以使其平均除以12，例如col-md-4。

由于12/4 = 3，因此本示例将自动为每行提供3。

<div class="row">
    LOOPCODE
    {
        <div class="col-md-4">
            DATA
        </div>
    }
</div>