每 3 列在引导中循环行

php twitter-bootstrap codeigniter

2022-08-30 20:10:01

我希望页面中的每一行都显示 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 列生成行？

这个截图是我从代码中得到的：

这就是我想要得到的：

答案 1

编辑：最初我从头顶上快速发布了这个。谢谢，Wael Assaf指出了一个改进，我已经使用了。另外，我对代码进行了一些更改，现在它是通用的，可用于可变数量的列，您可以通过更改变量$numOfCols

您需要为每行添加一个 div。然后，您拥有的浮动div将不仅环绕，而是将放在自己的容器中。

引导类非常适合于此：row

方法 1（不建议用于新版本的 HTML 和浏览器）：此方法适用于 HTML 和浏览器上的旧版本，因为新版本的 HTML 和浏览器具有内置函数来自动关闭缺少的标记，因此当您使用下面的代码时，它将自动关闭预定义的标记，而不是等待条件关闭该标记，从而导致布局不正确。<div class="row">if

注意：您可以尝试通过检查元素来观察结果

<?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 模数运算符在正确的点回显每行的打开和关闭。

方法 2（推荐）：这种方法是为了克服方法1面临的问题，从而为现代浏览器带来正确的布局。

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

注意：您可以尝试通过检查元素来观察结果

希望这有帮助。

答案 2

您可以使用函数将数组分块为多个部分。
php.net 手册：array_chunkarray_chunk(input array, size of each chunk)

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

下面是一个示例：

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