Twitter Bootstrap響應式縮略圖：如何治療第二排凹痕？

Question

我有下面的例子：http://jsfiddle.net/Q5dXc/show/

任何想法如何可以治癒縮進後第4縮圖？

這裏是源：http://jsfiddle.net/Q5dXc/

綜觀「更多的例子」標題下documentation，我可以看到他們的2排的例子，但我不能使它發揮作用。

任何想法？提前致謝。

Answer 1

他們在演示中並沒有很好地解釋它，但如果你在其周圍使用<div class="row-fluid">，則必須爲下一行縮略圖製作另一行。如果你想製作一些不是fluid的縮略圖，你可以使用常規的<div>或<p>。這應該作爲對Bootstrap的問題提出來，以便它可以被修復。

Answer 2

我發現相同的問題，並沒有找到一個優雅的解決方案。我用這個小黑客：

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

這是官方bootstrap github上的一個報告問題，所以我建議任何人尋找更多的解決方案來檢查 - twitter bootstrap on github.com。

截至目前這個問題還沒有解決，但各種用戶已經提交了10多個不同的解決方案在那裏的評論線程。

Answer 4

的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 chldren 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; 
}