CSS - Twitter引導：居中縮略圖網格並從鏈接/圖像中刪除邊框？

我正在使用Twitter Bootstrap創建圖像網格。這是HTML代碼：CSS - Twitter引導：居中縮略圖網格並從鏈接/圖像中刪除邊框？

<div class="container"> 
    <div class="row"> 
    <ul class="thumbnails"> 
     <li class="span6"> 
     <a href="x" class="thumbnail"> 
      <img src="http://www.loremipsum.com" /> 
     </a> 
     </li> 
    </ul> 
    </div><!-- /.row --> 
</div><!-- /.contaner -->

問題：

該網格沒有顯示在頁面上居中，左邊距總是比右邊距較小。

我已經嘗試將text-align: center設置爲父元素：沒有運氣。

我也試過

.thumbnails { text-align:center; } 
.thumbnails > li > a { display: inline-block; float: none; }

你猜怎麼着？沒有運氣！

使用偏移量也沒有影響。

我能做些什麼來居中這個網格？如果需要我可以提供截圖。

此外，有沒有辦法從鏈接中刪除邊框？我已經在thumbnails.less中註釋掉了，但是這給了我一些編譯器錯誤。

來源

2012-07-19 Sven

這裏是一個快速jsfiddle（jsfiddle），其中我使用.row和.container的背景顏色來顯示發生了什麼。我在代碼結構中使用了兩個span6，如果你只需要一個span6，就移除另一個。至於邊框，你必須同時調整box-shadow和.thumbnail類的邊框，因爲box-shadow在邊框外觀中扮演角色。

這裏是另一個的jsfiddle（2nd jsfiddle）不使用ul S/li S，但會使用.row-fluid，並把網格內的.thumbnails類。在這個版本中，縮略圖以span6爲中心。

最後一個示例（3rd jsfiddle）使用.row-fluid和自定義類.thumbnail-container來縮小縮略圖並將它們置於網格中。如果您在常規.row的內部嵌套.row-fluid，請記住，您需要使用.span12作爲流體行跨越其所在容器的整個寬度。這是因爲流體行使用百分比。

希望這些例子中的一個能引導您回答問題。我可以幫助你完全按照你想要的方式工作，但我需要了解更多細節。如果我做的小提琴沒有幫助你，請讓我知道什麼不適用於更多細節，我會盡力讓你休息。特別是，每行有多少個拇指和多少個大小（它不相關，但有助於該示例），並且您是否使用了兩個span6？基本上是兩列？或者你只使用一個span6作爲你的圖像？像這樣的東西。

來源

2012-07-20 01:15:36 jonschlinkert

感謝您的回答！我嘗試了所有的例子，但沒有一個能讓我達到預期的結果，所以這裏有更多的信息。我正在使用Wordpress模板中的代碼。我其實不知道圖像的尺寸。其中一些是肖像畫，一些是風景畫，但我將它們分組在一起以避免太多的自由空間。我想每行顯示兩個圖像（這就是爲什麼我使用了兩個span6） - 是的，兩列。目前我正在使用此代碼（小提琴3）：http://jsfiddle.net/3X3sY/它將圖像居中，但現在它們每行只有1個圖像。 – Sven 2012-07-20 10:52:39

好的 - 對不起。現在明白了，這只是我的愚蠢。我可以推薦給所有開始使用Twitter Bootstrap的人的一件事是：瞭解row與行流體之間的區別。 ;-)

來源

2012-07-24 00:51:06 Sven

CSS - Twitter引導：居中縮略圖網格並從鏈接/圖像中刪除邊框？

回答

相關問題