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

Question

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

问题是，当我列出所有的元素或我做一个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逻辑是一个选项，尝试渲染row每4个元素(我不能建议一个特定的代码没有查看你当前的逻辑)。

编辑

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

方案二修改第五个元素的边距

纠正受影响元素的左边框，这样您就不需要尊重本地Bootstrap标记。

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

不幸的是，这段代码与ie浏览器不兼容，所以也许你必须找到一个JavaScript或jQuery解决方案。