每 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

在 bootstrap 5 中无需编写额外的循环

<div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-3 justify-content-center">
    <?php
    $categories = $response['data'];
    foreach ($categories as $key => $category) { ?>
        <div class="col mb-5">
            <div class="card h-100">
                <p><?= $category['title'] ?></p>
            </div>
        </div>
    <?php } ?>
</div>

它会在中等屏幕上打破每行第 3 列，在此处阅读更多内容：https://getbootstrap.com/docs/5.0/layout/grid/

Answer 2

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

您需要为每一行添加一个 div。然后，您拥有的浮动 div 不仅会环绕，而且会位于它们自己的容器中。

引导类 row 非常适合：

方法一（不推荐用于新版本的 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 } } ?>

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

希望这会有所帮助。

Answer 3

dading84's answer 工作正常，但我已对其进行了修改以避免添加最后一个空行。更改只是简单地计算数组中元素的数量，然后检查是否到达最后一个元素，以防止添加新的带有类行的 div。

代码编辑：

<?php
//Columns must be a factor of 12 (1,2,3,4,6,12)
$numOfCols = 4;
$rowCount = 0;
$bootstrapColWidth = 12 / $numOfCols;
$arrayCount = count($rows);
?>
<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 && $rowCount < $arrayCount) {
        echo '</div><div class="row">';
    }
}
?>
</div>

简历：

• 添加了变量 $arrayCount
• 在 IF 模内添加条件以检查是否是最后一行，因此避免添加新 div。

Answer 4

在树枝文件中使用引导程序进行操作：

<div class="row">
    {% for item in items %}
        <div class="col-md-6 clearfix"></div>
    {% endfor %}
</div>

Answer 5

简单易行的解决方案

    $array = array('0' => 'ABC', '1' => 'DEF', '2' => 'GHI', '3' => 'JKL', '4' => 'MNO', '5' => 'PQR', '6' => 'STU', '7' => 'VWX', '8' => 'YZ' );

    $index = 0;
    $n_array = array();
    foreach ($array as $key => $value) {
        if ($key % 3 == 0) {
            $index++;
        }
        $n_array[$index][] = $value;
    }
    foreach ($n_array as $key => $values) {
    ?>
        <div class="row">
            <?php 
                foreach ($values as $value) {
                    echo "<div class='col-md-4'>".$value."</div>";
                }
            ?>
        </div>
    <?php 
    }

Answer 6

    <div class="row">
<?php
    foreach ($rows as $row){
?> 
     <div class="col-lg-4 col-sm-4 col-6">
     Your content
     </div>
<?php } ?>
    </div>

这将在每行中提供三列。

Answer 7

简单的自定义 css 解决方案....listing 包装器中的目标行带有 bottom-margin，最后一行没有 margin-bottom。

HTML

<div class="listing">
    <div class="row">
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
        </div>
    </div>
</div>

CSS

.listing .row {
    margin-bottom: 20px;
}

.listing .row:last-child {
    margin-bottom: 0;
}

Answer 8

这是一个更好的way - 使用 Collections 的 chunk() 函数。

`@foreach($items->chunk(5) as $chunk)
        <ul>
            @foreach($chunk as $item)
                Item {{ $loop->iteration }}
            @endforeach 
        </ul>
 @endforeach`

Answer 9

不需要所有这些复杂性。 Bootstrap 在 12 col 网格系统中自动工作。只要确保你循环并制作 col 大小，以便它均匀地除以 12，例如col-md-4.

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

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

Answer 10

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

将数组分块为具有 size 元素的数组。最后一个块可能包含小于 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 11

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

有用的步骤

• 定义$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>

提示：您并不是真的要 foreach 行，这是个坏主意，创建一行并 foreach 项目。