2

我似乎一直遇到这个问题，我希望得到引导大师的一些建议。

下面的jsfiddle演示了这个问题，因为父容器上有一个 row-fluid，只有第一行缩略图正确放置，其余的都插入（即第三个缩略图不直接位于第一个缩略图下方）。

代码如下：

<div class="container row-fluid">
    <div class="span6">
        <p>som content here</p>
    </div>
    <div class="span6">
        <ul class="thumbnails">
            <li class="span6">
                <div class="thumbnail">
                    <img src="http://placehold.it/150x100" />
                </div>
            </li>    
            <li class="span6">
                <div class="thumbnail">
                    <img src="http://placehold.it/150x100" />
                </div>
            </li>    
            <li class="span6">
                <div class="thumbnail">
                    <img src="http://placehold.it/150x100" />
                </div>
            </li>    
        </ul>
    </div>
</div>
4

2 回答 2

5

事实证明，这是 Bootstrap 中的一个已知问题/错误，当前的解决方法是在您的 css 中添加类似这样的内容 - 我可以确认效果很好：

li.thumbfix.span12 + li { margin-left : 0px; }
li.thumbfix.span6:nth-child(2n + 3) { margin-left : 0px; }
li.thumbfix.span4:nth-child(3n + 4) { margin-left : 0px; }
li.thumbfix.span3:nth-child(4n + 5) { margin-left : 0px; }
li.thumbfix.span2:nth-child(6n + 7) { margin-left : 0px; }
li.thumbfix.span1:nth-child(12n + 13) { margin-left : 0px; }

最初的修复不包括缩略图，但我已经添加了这个类，以便我可以专门针对损坏的缩略图列表并留下任何不遭受问题的单独。

于 2013-06-20T11:58:16.560 回答
0

你在 1 个 span6 元素中有 3 个 span6 元素，没有空间，所以第三个缩略图是环绕的，这就是你看到这个的原因，你也没有设置行来逻辑组织它们，试试这个：

<div class="container row-fluid">
    <div class="row">
        <div class="span6">
            <p>some content here</p>
        </div>
        <div class="span6">
            <ul class="thumbnails">
                <li>
                    <div class="thumbnail">
                        <img src="http://placehold.it/150x100" />
                    </div>
                </li>
                <li>
                    <div class="thumbnail">
                        <img src="http://placehold.it/150x100" />
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="span6 offset6">
            <ul class="thumbnails">
                <li>
                    <div class="thumbnail">
                        <img src="http://placehold.it/150x100" />
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
于 2013-06-18T13:02:25.633 回答