twitter-bootstrap - Bootstrap 缩略图第二行位置不正确

Question

我似乎一直遇到这个问题，我希望得到 Bootstrap 专家的一些建议。

以下jsfiddle演示了这个问题，因为父容器上有一个行流体，只有缩略图的第一行正确放置，其余的都插入(即第三个缩略图不直接位于第一个缩略图下方)。

代码如下:

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

Answer 1

事实证明，这是 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; }

原始修复不包括拇指修复，但我添加了此类，以便我可以专门针对损坏的缩略图列表，并保留任何不会遇到问题的列表。