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>
好的,所以我一直在努力寻找这个问题的明确答案,但一直没有找到 - 所以请不要将此标记为重复,因为这里 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>