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

Question

I am trying to create a Bootstrap positioning grid, generated by a PHP loop. The grid would contain 11 imgs, and the loop iterates 11 times. When the grid is created I don't understand why 2 columns always get skipped

this is the code I am using, I have uploaded a pictured of the resultenter image description here generated by my code

<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

Change this line :

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

To this :

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

Because the former will split to three only on the first block, and the rest block are splitted to four.