为什么Bootstrap网格定位会留下空白列？

Question

我正在尝试创建由PHP循环生成的Bootstrap定位网格。网格将包含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

更改此行：if&nbsp;(($i+1)&nbsp;%&nbsp;4&nbsp;==&nbsp;0)对此：if&nbsp;(($i)&nbsp;%&nbsp;3&nbsp;==&nbsp;0)因为前者将仅在第一个块上拆分为三个，其余块被拆分为四个。

Answer 2

<?php$counter = 11;echo '<div class="row">';for ($i = 0; $i <= $counter; $i++) {&nbsp; &nbsp; $x = $i + 1; // for venue images starting at 1&nbsp; &nbsp; echo '<div class="col-md-4">&nbsp; ciao <img src="pictures/venue' . $x . '.jpg" alt="Flowers" class="img-fluid"> </div>';&nbsp; &nbsp; if ( ( $x ) % 3 == 0 && $i != $counter) //added&nbsp; $i != $counter to make sure on the last iteration an extra row isn't added and changed modulus to 3 not 4&nbsp; &nbsp; &nbsp; &nbsp; echo '</div><div class="row" id="my-row-' . $x . '">';}echo '</div>';Bootstrap运行12列。您的代码有一些问题：您将计数器从1开始，导致第一个块显示3，但是下一个块显示4，依此类推。col-md-4占用12列中的4列，因此您只能连续容纳3列。您需要确保将属性包装在引号中，某些浏览器仍会解析该属性并按预期显示，而其他浏览器则不会。要正确显示想要的内容（3幅网格，共4行，网格），您需要12幅图像，否则将始终丢失1。提供ID的每个元素都必须是您要重复的唯一ID&nbsp;my-row