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

【问题标题】：why Bootstrap grid positioning leaves empty columns?为什么 Bootstrap 网格定位会留下空列？
【发布时间】：2019-09-04 23:15:36
【问题描述】：

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

这是我正在使用的代码，我上传了我的代码生成的 resultenter image description here 的图片

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

【问题讨论】：

标签： php css twitter-bootstrap grid bootstrap-grid

【解决方案1】：

改变这一行：

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

对此：

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

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

【讨论】：

你是个天才！我知道这是我犯的一个愚蠢的错误:(

【解决方案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 开始，导致第一个块显示 3，但您的下一个块显示 4，依此类推。 col-md-4 占用 12 列中的 4 列，因此您只能将其中 3 列放入行。
您需要确保将属性用引号括起来，一些浏览器仍会解析并按预期显示，而其他浏览器则不会。
要正确显示您想要的内容（3 张图像的网格，4 行），您需要 12 张图像，否则您将永远缺少 1 张。
提供 ID 的每个元素都必须是您重复的唯一 ID my-row

【讨论】：