Question

知道如何在第4个缩略图后修复缩进？

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

有什么想法吗？提前谢谢。

Answer 1

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

.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方式，您必须为每一行添加其中一个。

Answer 2

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

Answer 3

documentation for thumbnails并未提及响应式设计，而是预设row个.span*个孩子：

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

要让.span2，.span3，.span4或.span6以下patch的孩子能够使用现代浏览器和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;
}

Answer 4

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

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

Twitter Bootstrap响应式缩略图：如何治疗第二行的缩进？

4 个答案: