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，不会只是环绕，而是将在他们自己的容器中。

引导类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 modulus运算符来回显正确点处每行的打开和关闭。

希望这有帮助。

Answer 2

您可以使用array_chunk(input array, size of each chunk)功能将阵列分块 php.net manual: array_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>';
    }  
?>

Answer 3

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

有用的步骤

定义$i = 0;
在循环中制作你的回声。

在foreach结束之前递增$i++并创建一个条件：if $i % 3 == 0然后回显该行的结束标记，然后生成一个新行。

代码：

＆＃13;

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

＆＃13;

提示：你不是真的想要排好这一行，这是一个坏主意，做一行并预先处理这些项目。

Answer 4

不需要所有这些复杂性。 Bootstrap自动在12 col网格系统内工作。只要确保你循环并制作col大小，使其均匀分为12，例如COL-MD-4。

这个例子自12/4 = 3以来每行自动提供3个。

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

Answer 5

这是更好的way –使用Collections的chunk（）函数。

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

Answer 6

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

代码已修改：

globals=
globals=
globals=
globals=
10
20
30
40
tcl_rcFileName tcl_version argv0 argv tcl_interactive a ee b c auto_path env tcl_pkgPath tcl_patchLevel l1 argc l2 tcl_library tcl_platform

恢复：

添加了变量$ arrayCount
在IF模数内添加条件，以检查是否为最后一行，因此请避免添加新的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

var person = {
  firstName: "Penelope",
  lastName: "Barrymore",
  showFullName: function() {
    // The "context"
    console.log(this.firstName + " " + this.lastName);
  }
}

/* The "context", when invoking showFullName, is the person object, 
   when we invoke the showFullName () method on the person object.*/

/* And the use of "this" inside the showFullName() method has the value of 
   the person object */

person.showFullName(); // Penelope Barrymore

// If we invoke showFullName with a different object:
var anotherPerson = {
  firstName: "Rohit",
  lastName: "Khan"
};

// We can use the apply method to set the "this" value explicitly—more on the apply () method later.
// "this" gets the value of whichever object invokes the "this" Function, hence:

person.showFullName.bind(anotherPerson)(); // No output
// ------------------------------------^^

person.showFullName.apply(anotherPerson); // Rohit Khan

这将在每行中提供三列。

Answer 9

简单易用的解决方案

    $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 10

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

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

Answer 11

在引导程序 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/

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

11 个答案: