2

我试图使用 packery 来对齐一些 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/

任何想法如何解决这个问题？

4

1 回答 1

5

这是因为默认情况下引导列具有左侧边距，但是对于行内的第一个跨度 div 将其删除： 

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

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

于 2013-06-17T01:49:25.193 回答