Bootstrap + packery

Question

Я пытаюсь использовать упаковку для выравнивания некоторых div. Все работает нормально, но я получаю раздражающее пространство, от которого я не знаю, как избавиться. Эти пробелы появляются только во 2-й строке, и они продолжаются.

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span2" style="background-color: #999"> 
      the span2 
     </div> 
     <div class="span10"> 
      <div id="container"> 
      <div class="well item span3"> 
       <legend>Animals</legend> 
       <ul> 
        <li>cat</li> 
        <li>dog</li> 
        <li>rat</li> 
       </ul> 
      </div> 
       <div class="well item span3"> 
       <legend>Animals</legend> 
       <ul> 
        <li>cat</li> 
        <li>dog</li> 
        <li>rat</li> 
       </ul> 
      </div> 
       <div class="well item span3"> 
       <legend>Animals</legend> 
       <ul> 
        <li>cat</li> 
        <li>dog</li> 
        <li>rat</li> 
       </ul> 
      </div> 
       <div class="well item span3"> 
       <legend>Animals</legend> 
       <ul> 
        <li>cat</li> 
        <li>dog</li> 
        <li>rat</li> 
       </ul> 
      </div> 
       <div class="well item span3"> 
       <legend>Animals</legend> 
       <ul> 
        <li>cat</li> 
        <li>dog</li> 
        <li>rat</li> 
       </ul> 
      </div> 
       <div class="well item span3"> 
       <legend>Animals</legend> 
       <ul> 
        <li>cat</li> 
        <li>dog</li> 
        <li>rat</li> 
       </ul> 
      </div> 
       <div class="well item span3"> 
       <legend>Animals</legend> 
       <ul> 
        <li>cat</li> 
        <li>dog</li> 
        <li>rat</li> 
       </ul> 
      </div> 
       <div class="well item span3"> 
       <legend>Animals</legend> 
       <ul> 
        <li>cat</li> 
        <li>dog</li> 
        <li>rat</li> 
       </ul> 
      </div> 
       <div class="well item span3"> 
       <legend>Animals</legend> 
       <ul> 
        <li>cat</li> 
        <li>dog</li> 
        <li>rat</li> 
       </ul> 
      </div> 
      </div> 
     </div> 
    </div> 
</div> 

<script src='http://packery.metafizzy.co/packery.pkgd.min.js'></script> 
<script> 
var $container = $('#container'); 
// initialize 
$container.packery({ 
    itemSelector: '.item' 
}); 

</script> 

http://jsfiddle.net/WZxBM/

Любые идеи, как решить эту проблему?

Answer 1

Это потому, что по умолчанию бутстраповских столбцы имеют левый край руки, но это снимается для первого диапазона DIV внутри строки:

.row-fluid [class*="span"]:first-child { 
margin-left: 0; 
} 

Таким образом, левое поле руки снимается в первом span3 DIV, но никто других. Одним из решений было бы сохранить запас левого края в первом пролете, см. http://jsfiddle.net/panchroma/QePYB/