引导3两列缩略图布局不工作。与Jquery冲突？铬的问题？

编辑：似乎是Chrome的问题，但不是Safari。不确定这是否有助于缩小范围…

我有一个问题，我一辈子都搞不清楚。我试图使用TwitterBootstrap3的.thumbnail类创建一个两列布局（嵌套在另一个div中）。在我将Jquery同位素的砌石功能应用于.thumbnail div之前，一切似乎都很正常。两个thumbnail div不再合适，取而代之的是，每行只有一个图像（在“左”部分占用了正确的空间）列。我真的不知道是什么原因导致了它，但如果我从html中删除同位素类，一切都会很好。我猜可能会出现某种填充问题或其他问题，因为图像宽度似乎没有改变，但我找不到它发生的位置。我甚至停用了同位素CSS，它仍然会发生。此外，如果我将缩略div稍微缩小（例如，col-sm-5而不是col-sm-6），则行不再中断。下面是一个发生这种情况的页面示例：

为了让事情更加混乱，我尝试在JSFIDLE中重新创建问题，但似乎一切都很好：(

此外，我目前正在另一个网站上工作，在那里我做了完全相同的事情，经过大量的修补，它工作得很好（在非常小的屏幕上只有两列，但它可以在所有大小上工作）：

如果有人能提供任何帮助，或为我指出正确的方向，我将不胜感激！以下是我的一些代码：

<div class="col-sm-6" style="background-color:red;">
    <div class="row iso" style="background-color:yellow;">
      <?php if($page->hasImages()): ?> 
        <?php foreach($page->images() 
                           ->not('thumb.jpg') 
                           ->not('thumb.gif') 
                           as $image): ?>   
        <div class="item col-xs-6">
        <a class="thumbnail" href="<?php echo $image->url() ?>"><img src="<?php echo $image->url() ?>" width="<?php echo $image->width(); ?>" height="<?php echo $image->height(); ?>"></a>
        </div><!--item-->
        <?php endforeach ?>
      <?php endif ?>        
    </div><!--row-->
</div><!--col-sm-6-->

以下是Istope的代码（放在末尾，就在标记之前：

<script type="text/javascript">
        // jQuery - Wait until images (and other resources) are loaded
$(window).load(function(){
        // All images, css style sheets and external resources are loaded
$('.iso').isotope({
  // options
  itemSelector : '.item',
  layoutMode : 'masonry'
})   
});</script>

//jQuery-等待图像（和其他资源）加载
$（窗口）。加载（函数（）{
//加载所有图像、css样式表和外部资源
$（'.iso'）。同位素({
//选择权
itemSelector:“.item”，
布局模式：“砌体”
})   
});

非常感谢你

---

编辑：我不敢相信我直到现在才注意到这一点，但Safari似乎一切都正常。我一直在Chrome上测试，但它不起作用。因此，也许这可以提供一个线索？？？

我也有同样的问题，我不知道为什么会发生这种情况。但如果我更改“@grid-ground-width”，我就能解决这个问题在bootstrap3自定义到另一个值时，尝试29px而不是30px

希望有人能帮上忙