Question

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

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

 <dataStructure>
    <group name="General_Info" source="Q_GENERAL_INFO">
      <element name="Language_Code" value="language_code"></element>
      <element name="Print_Date" value="print_date"></element>
      <element name="Username" value="username"></element>
    </group>
 </dataStructure>

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开始，导致第一个块显示3，但是下一个块显示4，依此类推。col-md-4占用12列中的4列，因此您只能将其中3列行。
您需要确保将属性包装在引号中，某些浏览器仍会对此进行解析并按预期显示，而其他浏览器则不会。
要正确显示想要的内容（3幅网格，共4行），您需要12幅图像，否则您将始终丢失1幅。
提供ID的每个元素必须是您要重复的唯一ID my-row

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

2 个答案: