Html 引导缩略图未正确堆叠_Html_Css_Twitter Bootstrap

Html 引导缩略图未正确堆叠

html css twitter-bootstrap

Html 引导缩略图未正确堆叠,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我从bootstrap得到的缩略图高度不同，我认为这个问题可能导致它们无法正确堆叠（请参阅屏幕截图和小提琴）。我想我需要给他们加一个最小高度，但我就是不能让它工作。。有人能帮忙吗以下是我的代码： <body> <div class="container-fluid"> <div class="hidden-phone"> <a href="newBook.php"> <button cla

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

屏幕：

不，div的高度不是问题。问题是，您必须将

.span4

类的三个div放入

.row fluid

类的一个div中。如果您想使用

.span4

创建更多的div，则必须使用

.row fluid

类创建新的div，并将这些新的

.span4

div放入

例如，这是有效的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>

这是一个使用您的代码的演示>>

当然可以。。我正在通过DB的一个循环运行内部div（或li），所以我只需要一种方法来计算如何在3列之后打印出父div（row fluid）。好的，这是上面关于您的问题的答案：）您可以接受这个答案，并询问另一个关于编程问题的问题，以及问题的描述和PHP代码。好的方面：