引导+打包

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目录中被删除了，但其他的都没有。一种解决方案是将左侧边距保留在第一个跨度中，请参阅http://jsfiddle.net/panchroma/QePYB/