Question

我想制作一个很长的元素列表，例如将添加到网格中的图像，宽度为span12，每个元素宽度应为span3，这使得4行中的4个元素。

问题是，当我列出所有元素或者我创建一个列出它们的php函数时，Boostrap认为我想把它放在一行，但我没有。我想每4个元素左右创建一个新行......我希望能够添加尽可能多的<li>，而不用担心另一行应该在哪里。我该怎么办？

这就是我发生的事情，第5张图片的左侧有错误的边距。我想使它与第一行中的图像处于相同的位置。

我使用这个php逻辑来回显图片

  $dir = "../img";

    if (is_dir($dir)) {
        if ($dh = opendir($dir)) {
            while (($file = readdir($dh)) !== false) {
                if (preg_match("/.jpg/", $file)) {

                    echo "<li class='span3'>
                            <a href='$dir/$file' class='thumbnail'>
                              <img src='$dir/$file'>
                            </a>
                          </li>
                          ";   
               }
            }
           closedir($dh);
       }
    }

我不知道如何在每张第4张左右发布一个新行。

行标记为<div class='row-fluid'>

Answer 1

这是一个常见的问题，我认为没有优雅的解决方案。考虑其中一种方法。

解决方案1 检查您的迭代逻辑

如果重构PHP逻辑是一个选项，请尝试每4个元素呈现row（我不能在不查看当前逻辑的情况下建议特定代码）。

修改

while循环的代码如下：

<?php $count = 1; echo '<div class="row">'; while (your_condition) { echo '<div class="span3">your_content</div>'; if ($count % 4 == 0) { echo '</div>'; echo '<div class="row">'; } $count++; } echo '</div>';

解决方案2 破解第五个元素的边距

更正受影响元素的左边距，因此您无需尊重本机Bootstrap标记。

.thumbnails .span4:nth-child(4n+1) { margin-left: 0; }

不幸的是，该代码与Internet Explorer不兼容，因此您可能需要找到JavaScript或jQuery解决方案。

将连续缩略图列表引导到网格中

1 个答案: