php - 每 3 列在 Bootstrap 中循环行

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

Edit: Originally I posted this quickly from the top of my head. Thanks, Wael Assaf for pointing out an improvement, which I have used. Also, I have added a couple of changes to the code, now it is versatile and can be used for a variable number of columns you can choose by changing the variable $numOfCols

您需要为每一行添加一个 div。然后，您拥有的 float div 将不只是环绕，而是在它们自己的容器中。

Bootstrap 类 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 模数运算符在正确的点回显每行的开始和结束。

方法二(推荐):此方法是为了克服方法一所面临的问题，从而导致现代浏览器的正确布局。

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

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

希望这对您有所帮助。