Question

我似乎一直遇到这个问题而且我喜欢一个引导大师的建议。

以下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; }

原始修复程序不包含缩略图，但我已添加此类，以便我可以专门定位损坏的缩略图列表，并留下任何不会单独遇到问题的内容。

Answer 2

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

bootstrap缩略图第二行没有正确坐着

2 个答案: