为什么引导网格定位留下空列

Question

我正在尝试创建一个由PHP循环生成的引导定位网格。网格将包含 11 个 img，循环迭代 11 次。创建网格时，我不明白为什么总是跳过 2 列

这是我正在使用的代码，我已经上传了结果的图片输入图像描述在这里由我的代码生成

<style>
</style>
<?php 
$counter = 11;
echo '<div class="row " >';
for ($i = 1; $i < $counter; $i++) {
    echo "<div class=col-md-4 >  ciao <img src=pictures/venue$i.jpg alt=Flowers class=img-fluid>  </div>";
    if (($i+1) % 4 == 0)
        echo '</div><div class="row" id=my-row>';
}
echo '</div>';
?>

Answer 1

<?php
$counter = 11;
echo '<div class="row">';
for ($i = 0; $i <= $counter; $i++) {
    $x = $i + 1; // for venue images starting at 1
    echo '<div class="col-md-4">  ciao <img src="pictures/venue' . $x . '.jpg" alt="Flowers" class="img-fluid"> </div>';
    if ( ( $x ) % 3 == 0 && $i != $counter) //added  $i != $counter to make sure on the last iteration an extra row isn't added and changed modulus to 3 not 4
        echo '</div><div class="row" id="my-row-' . $x . '">';
}
echo '</div>';

引导程序运行 12 列。您的代码存在一些问题：

1. 您从 1 开始计数器，导致第一个块显示 3，但下一个块显示 4 等。 col-md-4 占用 12 列中的 4 列，因此您只能连续容纳其中的 3 列。

2. 您需要确保将属性包装在引号中，某些浏览器仍会解析此属性并按预期显示，而其他浏览器则不会。

3. 要正确显示您想要的内容(3 张图像的网格，4 行(，您需要 12 张图像，否则您将永远缺少 1 张。

4. 提供 ID 的每个元素必须是您要重复的唯一 ID my-row

Answer 2

更改此行：

if (($i+1) % 4 == 0)

对此：

if (($i) % 3 == 0)

因为前者只会在第一个块上分裂为三个，而其余块将拆分为四个。