引导缩略图未正确堆叠答案

【问题标题】：bootstrap thumbnails not stacking properly引导缩略图未正确堆叠
【发布时间】：2013-04-08 07:54:11
【问题描述】：

我的 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/

屏幕：

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

不，div 的高度不是问题。问题是您必须只将三个具有.span4 类的div 放在一个具有.row-fluid 类的div 中。如果您想要更多带有.span4 的div，您必须使用.row-fluid 类创建新的div，并将这些新的.span4 div 放入其中。 See Twitter bootstrap official documentation.

例如，这是有效的 Twitter Bootstrap 标记

<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/

【讨论】：

嗯，那当然可以。我正在通过数据库循环运行内部 div（或 li），所以我只需要一种方法来弄清楚如何打印出父 div（行-fluid) 在 3 列之后..
嗯，这是对您上面问题的回答 :) 您可以接受这个回答，并通过问题描述和 PHP 代码询问有关编程问题的另一个问题。
好点：stackoverflow.com/questions/15869534/…