Bootstrap 3與石工

Question

我有一個網格使用twitter引導（新版本3.0.1）流體容器和jQuery砌體插件的問題。

默認情況下（1200px寬度）每行應該有3個元素。如果我從4個col-xs-3元素開始，那麼一切正常（請參閱評論中的示例）。但我的問題是，當開始與col-xs-6/col-xs-3/col-xs-3。

問題可以在這裏看到： http://jsfiddle.net/andre1404/97eHr/1/

不起作用：

<div class="post col-xs-6"> 
      <img src="http://placehold.it/400x400" /> 
     </div> 

     <div class="post col-xs-3"> 
      <img src="http://placehold.it/400x400" /> 
     </div> 

     <div class="post col-xs-3"> 
      <img src="http://placehold.it/400x400" /> 
     </div> 

     <div class="post col-xs-3"> 
      <img src="http://placehold.it/400x400" /> 
     </div> 

     <div class="post col-xs-3"> 
      <img src="http://placehold.it/400x400" /> 
     </div> 

     <div class="post col-xs-6"> 
      <img src="http://placehold.it/400x400" /> 
     </div> 

正常工作：

<div class="post col-xs-3"> 
      <img src="http://placehold.it/400x400" /> 
     </div> 

     <div class="post col-xs-3"> 
      <img src="http://placehold.it/400x400" /> 
     </div> 

     <div class="post col-xs-3"> 
      <img src="http://placehold.it/400x400" /> 
     </div> 

     <div class="post col-xs-3"> 
      <img src="http://placehold.it/400x400" /> 
     </div> 

     <div class="post col-xs-6"> 
      <img src="http://placehold.it/400x400" /> 
     </div> 

     <div class="post col-xs-3"> 
      <img src="http://placehold.it/400x400" /> 
     </div> 

     <div class="post col-xs-3"> 
      <img src="http://placehold.it/400x400" /> 
     </div> 

任何想法？

Answer 1

嘗試玩ColumnWidth參數。 腳本更改爲類似：

$(document).ready(function() { 
    var container = $('#posts'); 

    container.masonry({ 
     gutter: 0, 
     itemSelector: '.post', 
     columnWidth: 3 
    }); 
}); 

這似乎收到預期的效果。