twitter-bootstrap - Bootstrap + packery

Question

我正在尝试使用 packery 来对齐一些 div。一切正常，但我有一个烦人的空间，我不知道如何摆脱它。这个空间只出现在第二行，而且它们一直在继续。

<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

这是因为默认情况下 bootstrap 列有左边距，但对于行中的第一个 span div 已删除:

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

所以左侧边距在第一个 span3 div 中被移除，但其他的都没有。一种解决方案是在第一个跨度中保留左边距，请参见 http://jsfiddle.net/panchroma/QePYB/