0

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

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

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

截图在这里

我使用这个 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);
       }
    }

而且我不知道如何在每第四张左右的照片中发布一个新行。

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

4

1 回答 1

0

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

解决方案 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>';

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

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

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

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

于 2013-05-30T10:24:04.733 回答