bootstrap縮略圖沒有正確堆疊

引導程序的縮略圖對它們有不同的高度，我認爲這個問題可能會導致它們無法正確堆疊（請參見截圖和小提琴）。我想我需要爲他們包括一個最小高度，但我無法讓它工作..任何人都可以伸出援手嗎？bootstrap縮略圖沒有正確堆疊

這裏是我的代碼：

<body> 
    <div class="container-fluid"> 
     <div class="hidden-phone"> 
     <a href="newBook.php"> 
     <button class="btn btn-large btn-primary" style="float:right; margin-top:30px;" type="button">Add Book</button> 
     </a> 
     </div> 
     <div class="row-fluid"> 
     <div class="span12 well"> 

     <div class="row-fluid"> 
      <ul class="thumbnails"> 

      <li class="span4"> 
       <div class="thumbnail"> 
       <img src="http://placehold.it/320x200" alt="ALT NAME"> 
       <div class="caption"> 
        <h3>Title</h3> 

        <p>Seller: Me</p> 
        <p>Email: </p> 
        <p>Cost: </p> 
        <p>Condition: </p> 
        <p align="center"> 
        <a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View More information</a> 
        </p> 
       </div> 
       </div> 
      </li> 
      <li class="span4"> 
       <div class="thumbnail"> 
       <img src="http://placehold.it/320x200" alt="ALT NAME"> 
       <div class="caption"> 
        <h3>Title</h3> 
        <span class="label label-warning" style="margin-bottom: 10px;">Book has been sold!</span> 
        <p>Seller: Me</p> 
        <p>Email: </p> 
        <p>Cost: </p> 
        <p>Condition: </p> 
        <p align="center"> 
        <a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View More information</a> 
        </p> 
       </div> 
       </div> 
      </li> 
      <li class="span4"> 
       <div class="thumbnail"> 
       <img src="http://placehold.it/320x200" alt="ALT NAME"> 
       <div class="caption"> 
        <h3>Title</h3> 

        <p>Seller: Me</p> 
        <p>Email: </p> 
        <p>Cost: </p> 
        <p>Condition: </p> 
        <p align="center"> 
        <a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View More information</a> 
        </p> 
       </div> 
       </div> 
      </li> 

      <li class="span4"> 
       <div class="thumbnail"> 
       <img src="http://placehold.it/320x200" alt="ALT NAME"> 
       <div class="caption"> 
        <h3>Title</h3> 

        <p>Seller: Me</p> 
        <p>Email: </p> 
        <p>Cost: </p> 
        <p>Condition: </p> 
        <p align="center"> 
        <a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View More information</a> 
        </p> 
       </div> 
       </div> 
      </li> 
         <li class="span4"> 
       <div class="thumbnail"> 
       <img src="http://placehold.it/320x200" alt="ALT NAME"> 
       <div class="caption"> 
        <h3>Title</h3> 

        <p>Seller: Me</p> 
        <p>Email: </p> 
        <p>Cost: </p> 
        <p>Condition: </p> 
        <p align="center"> 
        <a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View More information</a> 
        </p> 
       </div> 
       </div> 
      </li> 

      </ul> 
     </div> 
    </div> 
    </div> 
    </div> 

    </body>

小提琴：http://jsfiddle.net/Z3VwZ/

屏幕： enter image description here

來源

2013-04-07 Kevin

沒有，div的高度不是問題。問題是，您必須只將.span4級別的三個div與.row-fluid級別放在一個div中。如果你想更多的div與.span4你必須創建新的div與.row-fluid類，並把這些新的.span4 divs裏面。 See Twitter bootstrap official documentation。

例如，這是有效的Twitter的引導標記

<div class="row-fluid"> 
    <div class="span4"></div> 
    <div class="span4"></div> 
    <div class="span4"></div> 
</div> 

<div class="row-fluid"> 
    <div class="span4"></div> 
    <div class="span4"></div> 
    <div class="span4"></div> 
</div> 

<div class="row-fluid"> 
    <div class="span12"></div> 
</div> 

<div class="row-fluid"> 
    <div class="span8"></div> 
    <div class="span1"></div> 
    <div class="span3"></div> 
</div>

這裏正在與你的代碼演示>>>http://jsfiddle.net/Z3VwZ/1/

來源

2013-04-07 23:47:14

那麼這肯定會做到這一點..我正在對內部的div（或李）通過一個循環從數據庫，所以我只需要一個方法來弄清楚如何打印出3列後的父div（row-fluid）。 – Kevin 2013-04-08 00:02:30

那麼，這是從上面的問題的答案:)你可以接受這個答案並且詢問關於編程問題的另一個問題，並描述問題和PHP代碼。 – 2013-04-08 00:16:28

好點：http://stackoverflow.com/questions/15869534/nested-for-loop-difficulties – Kevin 2013-04-08 00:33:06

bootstrap縮略圖沒有正確堆疊

回答

相關問題