bootstrap縮略圖第二行沒有正確座標

我似乎一直遇到這個問題，我很想從bootstrap大師那得到一些建議。bootstrap縮略圖第二行沒有正確座標

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

來源

2013-06-18 Rob

你試圖複製什麼行爲？你想讓他們都在同一條線上嗎？如果是這樣，你的問題是你每行只能有兩個span6元素。 – philipcdavis

沒問題，第三個拇指不是直接坐在第一個拇指下 – Rob

事實證明這是一個已知的問題/錯誤的引導，目前的解決辦法是，以這樣的添加到您的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; }

原始修補程序沒有包含thumbfix，但我添加了此類，以便我可以專門定位損壞的縮略圖列表並留下任何不會單獨出現問題的東西。

來源

2013-06-20 11:58:16 Rob

任何轉換解決方案這對Bootstrap 3.xx使用col系統？ – Allerion

我不相信BS3患有同樣的問題......我在BS3中創建了類似的縮略圖網格，但沒有遇到這個問題。這裏有一個例子http://www.cavvanbah.com/photos – Rob

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

來源

2013-06-18 13:02:25

對不起，但所有的拇指需要在同一個列表中，因爲它們是由knockoutjs foreach生成的 – Rob

他們總是會是3個拇指嗎？你能解釋一下嗎？ –

可能有20個拇指 - 在這種情況下，除了第一個之外，每行只有1個，因爲沒有足夠的空間讓另一個18由於懸掛邊緣而並排顯示。嘗試在jsfiddle示例中添加更多內容，您將看到問題 – Rob

bootstrap縮略圖第二行沒有正確座標

回答

相關問題