PHP 循环输出 Bootstrap 中的图片库,每行四个缩略图

PHP loop to output image gallery in Bootstrap with four thumbnails per row

好的,所以我一直在努力寻找这个问题的明确答案,但一直没有找到 - 所以请不要将此标记为重复,因为这里 none 的答案对我有用.

我有一组简单的图像和存储在数据库中的位置 table。我想使用 PHP 输出它们。我知道执行此操作的所有 MYSQL 语句等,但是我似乎无法输出一行 4 个缩略图,关闭该行然后重新开始。我试过使用这个所谓的计数标记但无济于事。恐怕我的代码很少,但我在这里拉扯我的头发。

<?php
    $count = 0;
    echo '<div class="row">';
    for($i=0; $i < 4; $i++) {
        echo '<div class="col-md-3 text-center"><img src="https://via.placeholder.com/150" alt=""></div>';
    }
    echo '</div>';
    $count++;
?>

我以占位符为例。有没有人真正解决过这个问题,所以它清晰准确?我没有看到将 count 变量放在正确位置的位置,或者是否有 if 语句应该放在某处?

请有人帮忙。正如我所说,我现在真的快筋疲力尽了。

编辑后的答案:

<?php

$count_items = 12;

$columns = 4;

echo '<div class="row">';
for($i = 0; $i < $count_items; $i++) {
  if($i % $columns === 0 && $i > 0) {
    echo '</div><div class="row">';
  }
  echo '<div class="col-md-3 text-center"><img src="https://via.placeholder.com/150" alt=""></div>';
}
echo '</div>';

输出:

<div class="row">
  <div class="col-md-3 text-center"><img src="https://via.placeholder.com/150" alt=""></div>
  <div class="col-md-3 text-center"><img src="https://via.placeholder.com/150" alt=""></div>
  <div class="col-md-3 text-center"><img src="https://via.placeholder.com/150" alt=""></div>
  <div class="col-md-3 text-center"><img src="https://via.placeholder.com/150" alt=""></div>
</div>
<div class="row">
  <div class="col-md-3 text-center"><img src="https://via.placeholder.com/150" alt=""></div>
  <div class="col-md-3 text-center"><img src="https://via.placeholder.com/150" alt=""></div>
  <div class="col-md-3 text-center"><img src="https://via.placeholder.com/150" alt=""></div>
  <div class="col-md-3 text-center"><img src="https://via.placeholder.com/150" alt=""></div>
</div>
<div class="row">
  <div class="col-md-3 text-center"><img src="https://via.placeholder.com/150" alt=""></div>
  <div class="col-md-3 text-center"><img src="https://via.placeholder.com/150" alt=""></div>
  <div class="col-md-3 text-center"><img src="https://via.placeholder.com/150" alt=""></div>
  <div class="col-md-3 text-center"><img src="https://via.placeholder.com/150" alt=""></div>
</div>