Bootstrap 3 列移位问题

Question

我的布局有问题，我似乎无法弄清楚。

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

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

Masonry 正在向其中添加位置以使它们交错，但同时也击倒了我的第 4 个位置。

有什么想法可以让每行保留 4 个吗？

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

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

更新：

如果我关闭砌体，这就是它的样子：

Answer 1

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

看到这个updated fiddle

Answer 2

试试

<ul class="thumbnails list-unstyled"> 

相对于

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

Answer 3

来自引导程序：Content should be placed within columns, and only columns may be immediate children of rows.

据我所知，你有.container > .col-md-3

什么时候应该有.container > .row > .col-md-3