我正在尝试使用 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>
有什么想法可以解决这个问题吗?
最佳答案
这是因为默认情况下 bootstrap 列有左侧边距,但该行中的第一个跨度 div 已删除该左侧边距:
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
因此,第一个 span3 div 中的左侧边距被删除,但其他部分均未删除。一种解决方案是将左侧边距保留在第一个跨度中,请参阅 http://jsfiddle.net/panchroma/QePYB/
关于twitter-bootstrap - Bootstrap +打包,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17135980/