我一直在使用同位素开展一个项目，我必须更改某些内容，因为它正确显示了所有内容，然后我部署了它，它在 .article 类之间添加了所有这些额外的空格。我不知道是什么原因造成的，但我开始拔头发，因为我不知道如何解决这个问题。容器中的文章之间没有元素，但我正在使用 twitter 引导程序，我想知道网格是否会导致这种情况或其他原因？下面是渲染的页面代码（有很多），但文章 div 是我所说的同位素。
这是间距问题的示例：
编辑
我删除了很多 HTML 以专注于同位素容器 div。谢谢！页：
编辑 2
添加同位素代码：
我在页面底部用这三个来称呼它：
//isotope
$("#articles").imagesLoaded(IsotopeLoad);
$(".sorter").click(IsotopeSort);
//isotope filtering
$("#filterBtns").children().click(OnFilterChange);
那么这里是那些功能
function IsotopeLoad() {
$("#articles").isotope({
itemSelector: ".article",
getSortData: {
worn: function ($e) {
return $e.find(".lastWornOn").text();
},
purchased: function ($e) {
return $e.find(".purchasedOn").text();
}
}
});
}
function IsotopeSort() {
var sortByCode = $(this).parent().find(".sortBy").text();
var IsAsc = $(this).parent().find(".asc").text();
$("#articles").isotope({
sortBy: sortByCode,
sortAscending: IsAsc
});
}
function OnFilterChange() {
//check if first button is active
if ($(this).hasClass("active")) {
$(this).removeClass("active");
}
else {
$(this).addClass("active");
}
//get filter buttons
var filters = $("#filterBtns").children(".active");
var filterString = "";
//loop through buttons to get filter values in one string
$(filters).each(function (index, e) {
filterString = filterString + $(e).val() + ", ";
});
if (filterString.substring(filterString.length - 2) == ", ") {
filterString = filterString.substring(0, filterString.length - 2);
}
filterString = $.trim(filterString)
//apply isotope
$("#articles").isotope({
filter: filterString
});
}
页面代码：
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<div class="well">
<div class="btn-group pull-right">
<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Sort <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" class="sorter" id="byLastWornDesc">By Last Worn</a><span class="sortBy">worn</span><span class="asc">false</span></li>
<li><a href="#" class="sorter" id="byLastWornAsc">By First Worn</a><span class="sortBy">worn</span><span class="asc">true</span></li>
<li><a href="#" class="sorter" id="byPurchasedDesc">By Last Purchased</a><span class="sortBy">purchased</span><span class="asc">false</span></li>
<li><a href="#" class="sorter" id="byPurchasedAsc">By First Purchased</a><span class="sortBy">purchased</span><span class="asc">true</span></li>
</ul>
</div>
<div class="btn-group btn-group-vertical" id="filterBtns">
<button type="button" class="btn btn-mini" value=".BCBG">BCBG</button>
<button type="button" class="btn btn-mini" value=".Bebe">Bebe</button>
</div>
</div>
</div>
<div class="span10">
<div id="articles" style="position: relative; overflow: hidden; height: 750px;" class="isotope">
<div class="article Dress Sequin Black isotope-item" id="1" rel="tooltip" data-title="Dress Sequin Black" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px);">
<img alt="1" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/Black%20and%20sequin%20mini%20dress.jjpgthumb.jpg">
<span class="hide purchasedOn"></span> <span class="hide lastWornOn"></span>
</div>
<div class="article Sweater Tan isotope-item" id="2" rel="tooltip" data-title="Sweater Tan" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(161px, 0px, 0px);">
<img alt="2" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/bcbg.imageg.net120212114525152thumb.jpg">
<span class="hide purchasedOn">11/20/2012 12:00:00 AM</span> <span class="hide lastWornOn">11/29/2012 12:00:00 AM</span>
</div>
<div class="article Leggings Black isotope-item" id="4" rel="tooltip" data-title="Leggings Black" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(483px, 0px, 0px);">
<img alt="4" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/bcbg.imageg.net120212115347827thumb.jpg">
<span class="hide purchasedOn">11/21/2012 12:00:00 AM</span> <span class="hide lastWornOn">12/2/2012 12:00:00 AM</span>
</div>
<div class="article Blue Sweater isotope-item" id="5" rel="tooltip" data-title="Blue Sweater" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(805px, 0px, 0px);">
<img alt="5" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/bcbg.imageg.net120212115533282thumb.jpg">
<span class="hide purchasedOn">12/1/2012 12:00:00 AM</span> <span class="hide lastWornOn">12/1/2012 12:00:00 AM</span>
</div>
<div class="article Untagged isotope-item" id="6" rel="tooltip" data-title="Untagged" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(1127px, 0px, 0px);">
<img alt="6" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/Black%20and%20Tan%20dressthumb.jpg">
<span class="hide purchasedOn">12/2/2012 12:00:00 AM</span> <span class="hide lastWornOn">12/2/2012 12:00:00 AM</span>
</div>
<div class="article Untagged isotope-item" id="7" rel="tooltip" data-title="Untagged" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 250px, 0px);">
<img alt="7" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/Black%20and%20Tan%20lace%20dressthumb.jpg">
<span class="hide purchasedOn"></span> <span class="hide lastWornOn"></span>
</div>
<div class="article Black Lace Romper isotope-item" id="8" rel="tooltip" data-title="Black Lace Romper" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(322px, 250px, 0px);">
<img alt="8" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/Black%20and%20Tan%20romperthumb.jpg">
<span class="hide purchasedOn">11/29/2012 12:00:00 AM</span> <span class="hide lastWornOn"></span>
</div>
<div class="article White isotope-item" id="10" rel="tooltip" data-title="White" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(644px, 250px, 0px);">
<img alt="10" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/bcbg.imageg.net120212120238879thumb.jpg">
<span class="hide purchasedOn">11/22/2012 12:00:00 AM</span> <span class="hide lastWornOn"></span>
</div>
<div class="article Dress Green Sequin isotope-item" id="12" rel="tooltip" data-title="Dress Green Sequin" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(966px, 250px, 0px);">
<img alt="12" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/DSC_0002athumb.jpg">
<span class="hide purchasedOn">12/1/2012 12:00:00 AM</span> <span class="hide lastWornOn">9/24/2012 12:00:00 AM</span>
</div>
<div class="article Black Gunmetal Metallic isotope-item" id="14" rel="tooltip" data-title="Black Gunmetal Metallic" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(1127px, 250px, 0px);">
<img alt="14" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/EMP1thumb.jpg">
<span class="hide purchasedOn"></span> <span class="hide lastWornOn"></span>
</div>
<div class="article Floral Blue Shirt isotope-item" id="15" rel="tooltip" data-title="Floral Blue Shirt" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 500px, 0px);">
<img alt="15" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/DSC_0309athumb.jpg">
<span class="hide purchasedOn"></span> <span class="hide lastWornOn">9/5/2012 12:00:00 AM</span>
</div>
<div class="article White Pants Stripe isotope-item" id="16" rel="tooltip" data-title="White Pants Stripe" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(322px, 500px, 0px);">
<img alt="16" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/DSC_0430athumb.jpg">
<span class="hide purchasedOn"></span> <span class="hide lastWornOn">9/1/2012 12:00:00 AM</span>
</div>
<div class="article Red Romper isotope-item" id="17" rel="tooltip" data-title="Red Romper" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(644px, 500px, 0px);">
<img alt="17" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/DSC_0055athumb.jpg">
<span class="hide purchasedOn"></span> <span class="hide lastWornOn">7/3/2012 12:00:00 AM</span>
</div>
</div>
[1]: http://i.stack.imgur.com/QrtOS.jpg