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缩略图没有正确堆叠

回答

相关问题