为什么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 (($i+1) % 4 == 0)

对此：

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

因为前者将仅在第一个块上拆分为三个，其余块被拆分为四个。

Answer 2

<?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>';

Bootstrap运行12列。您的代码有一些问题：

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

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

3. 要正确显示想要的内容（3幅网格，共4行，网格），您需要12幅图像，否则将始终丢失1。

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