8

我有以下示例：http: //jsfiddle.net/Q5dXc/show/

知道如何在第四个缩略图之后治愈缩进吗？

这是来源：http: //jsfiddle.net/Q5dXc/

查看“更多示例”标题下的文档，我可以看到他们的 2 行示例，但我无法使其工作。

有任何想法吗？提前致谢。

4

4 回答 4

7

我发现了同样的问题，但没有找到一个优雅的解决方案。我正在使用这个小技巧：

.thumbnails .span4:nth-child(3n+1),
.thumbnails .span4:first-child + li + li + li,
.thumbnails .span4:first-child + li + li + li + li + li + li {
    margin-left: 0;
}

注意长系列li是IE方式，每行都必须加一个。

于 2012-08-31T12:16:06.443 回答
3

他们在演示中并没有很好地解释它，但如果你<div class="row-fluid">在它周围使用它，你必须为下一行缩略图制作另一行。如果您只想制作一堆不是的缩略图，fluid您可以使用常规<div>或<p>. 这应该作为针对 Bootstrap 的问题提出，以便可以修复。

于 2012-08-31T12:14:59.917 回答
1

缩略图的文档并没有提到响应式设计，而是预定义row的.span*儿童：

...the thumbnails component uses existing grid system classes - like .span2 or .span3 - for control of thumbnail dimensions.

要让.span2、.span3或.span4以下补丁.span6适用于现代浏览器和 Twitter Bootstrap 2.3.2：

.row-fluid .thumbnails .span2:nth-child(6n+1), 
    .row-fluid .thumbnails .span3:nth-child(4n+1), 
    .row-fluid .thumbnails .span4:nth-child(3n+1), 
    .row-fluid .thumbnails .span6:nth-child(2n+1) {
        margin-left: 0;
}
于 2013-06-06T17:30:38.000 回答
0

这是官方引导 github 上报告的问题，所以我建议任何寻找更多解决方案的人来检查 - github.com 上的 twitter bootstrap。

截至目前，该问题尚未解决，但各种用户已在评论线程中提交了 10 多个不同的解决方案。

于 2013-05-28T14:45:43.430 回答