Question

我的布局有问题，我似乎无法弄明白。

我正在使用带有砌体的Bootstrap 3。在砌筑加载之前（或当它被禁用时），容器中有4个项目，就像我期望的那样。但是，一旦应用了砖石，它就会将第4个项目拆分为新的一行。

下面的代码中有什么明显的东西会导致这种情况吗？没有CSS样式应用于我的内容或自己的砌体。它只有3个col div放在一个12 col的容器中。

砌体正在增加它的位置以使它们交错，但也打倒了我的第四个。

我能做些什么来保持每行4个？

注意：下图中的样式位置是从砌体中添加的，而不是我之前的结果。

enter image description here

    <div class="container">
   <ul class="thumbnails list-unstyled posts">
            <!-- Submission Block ID# 1-->
      <li class="col-md-3 item Dog" style="position: absolute; left: 0px; top: 0px;">
         <div style="padding: 0" class="thumbnail">
            <div style="padding:4px">
               <img src="uploads/nalaHUS123.png" style="width: 100%">
            </div>
            <div class="caption">
               <h4 class="">Nala  <small>(<span class="petType">Dog</span>) (1)</small></h4>
               <p>Shes a wonder pup!</p>
               <center><button class="btn btn-primary btn-sm" type="button"><i class="fa fa-heart"></i>&nbsp;&nbsp;Vote&nbsp;&nbsp;</button></center>
            </div>
            <div style="text-align: left" class="modal-footer">
               <div class="progress">
                  <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar">
                     <span class="sr-only">60% Complete</span>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-4"><b>Rank</b><br><small>3rd Place</small></div>
                  <div class="col-md-2"></div>
                  <div class="col-md-4"><b>Raised</b><br><small>$130.00</small></div>
               </div>
            </div>
         </div>
      </li>
      <!-- End Submission Block ID# 1-->  
            <!-- Submission Block ID# 2-->
      <li class="col-md-3 item Cat">
         <div style="padding: 0" class="thumbnail">
            <div style="padding:4px">
               <img src="uploads/simbaHUS123.png" style="width: 100%">
            </div>
            <div class="caption">
               <h4 class="">Simba  <small>(<span class="petType">Cat</span>) (2)</small></h4>
               <p>Shes a wonder pup!</p>
               <center><button class="btn btn-primary btn-sm" type="button"><i class="fa fa-heart"></i>&nbsp;&nbsp;Vote&nbsp;&nbsp;</button></center>
            </div>
            <div style="text-align: left" class="modal-footer">
               <div class="progress">
                  <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar">
                     <span class="sr-only">60% Complete</span>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-4"><b>Rank</b><br><small>3rd Place</small></div>
                  <div class="col-md-2"></div>
                  <div class="col-md-4"><b>Raised</b><br><small>$250.00</small></div>
               </div>
            </div>
         </div>
      </li>
      <!-- End Submission Block ID# 2-->  
            <!-- Submission Block ID# 3-->
      <li class="col-md-3 item Bird">
         <div style="padding: 0" class="thumbnail">
            <div style="padding:4px">
               <img src="uploads/boboHUS123.png" style="width: 100%">
            </div>
            <div class="caption">
               <h4 class="">BoBo  <small>(<span class="petType">Bird</span>) (3)</small></h4>
               <p>Shes a wonder pup!</p>
               <center><button class="btn btn-primary btn-sm" type="button"><i class="fa fa-heart"></i>&nbsp;&nbsp;Vote&nbsp;&nbsp;</button></center>
            </div>
            <div style="text-align: left" class="modal-footer">
               <div class="progress">
                  <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar">
                     <span class="sr-only">60% Complete</span>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-4"><b>Rank</b><br><small>3rd Place</small></div>
                  <div class="col-md-2"></div>
                  <div class="col-md-4"><b>Raised</b><br><small>$323.00</small></div>
               </div>
            </div>
         </div>
      </li>
      <!-- End Submission Block ID# 3-->  
            <!-- Submission Block ID# 4-->
      <li class="col-md-3 item Bird">
         <div style="padding: 0" class="thumbnail">
            <div style="padding:4px">
               <img src="uploads/frankHUS123.png" style="width: 100%">
            </div>
            <div class="caption">
               <h4 class="">Frank  <small>(<span class="petType">Bird</span>) (4)</small></h4>
               <p>Shes a wonder pup!</p>
               <center><button class="btn btn-primary btn-sm" type="button"><i class="fa fa-heart"></i>&nbsp;&nbsp;Vote&nbsp;&nbsp;</button></center>
            </div>
            <div style="text-align: left" class="modal-footer">
               <div class="progress">
                  <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar">
                     <span class="sr-only">60% Complete</span>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-4"><b>Rank</b><br><small>3rd Place</small></div>
                  <div class="col-md-2"></div>
                  <div class="col-md-4"><b>Raised</b><br><small>$323.00</small></div>
               </div>
            </div>
         </div>
      </li> 
         </ul>
   <nav id="pagination" style="display: none;"><a href="?page=2" class="next"></a></nav>      
</div>

更新：

如果我关闭砖石，这就是它的样子：

enter image description here

Answer 1

gutter砌体选项是在列之间添加水平空格，使它们不适合单行，删除它，它应该可以正常工作。

请参阅 updated fiddle

Answer 2

尝试

<ul class="thumbnails list-unstyled">

而不是

<ul class="thumbnails list-unstyled posts">

Answer 3

来自Bootstrap：Content should be placed within columns, and only columns may be immediate children of rows.

从我所看到的，你有.container > .col-md-3

何时应该.container > .row > .col-md-3

列移位的Bootstrap 3问题

3 个答案: