Google chrome 当使用Jquery同位素时，Chrome中Bootstrap 3列出现问题（但在Safari中很好！）

我花了好几天的时间试图解决这个问题，我已经束手无策了。如果有人有任何见解，我将非常非常感激

我在一个网站上工作，同时使用Bootstrap3和Jquery。我使用Bootstrap3的网格将div排列成四列。在我将同位素过滤器应用于div之前，一切都很好。之后，在Chrome中，它变成了三列布局，右侧有一个巨大的间隙。看起来好像三个div保持相同的宽度，而不是四个。令人恼火的是，在狩猎中一切似乎都很好

这里是一个不同的例子。狩猎（正确）：

铬（不正确）：

我已经尝试了所有方法，我发现唯一的“解决方案”是将包含同位素元素的.container div上的左填充和右填充更改为0。但是，我不想这样做，因为其他包含同位素的容器div不能正确排列

我真的非常感谢你能给我的任何帮助！我真的搞不懂这一点……我创建了一个基本的JSFIDLE来说明：

以下是基本的html：

<div class="container">
    <div class="row iso">
        <div class="col-sm-3 iso-item" style="padding-bottom: 20px;">
            <div style="background-color: green;">
                <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </p>
            </div>
        </div>
    </div>
</div>

那只敏捷的棕色狐狸跳过了那只懒狗。那只敏捷的棕色狐狸跳过了那只懒狗。那只敏捷的棕色狐狸跳过了那只懒狗。那只敏捷的棕色狐狸跳过了那只懒狗

以下是同位素脚本：

<script type="text/javascript">
var $container = $('.iso');

$container.imagesLoaded( function(){
  $container.isotope({
    // options...
    itemSelector : '.iso-item',
    layoutMode : 'masonry'
  });
});

</script>

var$container=$（'.iso'）；
$container.imagesLoaded（函数（）{
$container.com({
//选项。。。
项目选择器：'.iso项目'，
布局模式：“砌体”
});
});

在我目前工作的项目中遇到了完全相同的问题。只有使用.col-sm-3，而使用2或4就可以了。奇怪

不管怎样，它为我做的只是在引导CSS文件上添加以下CSS作为覆盖：

.col-sm-3 {
    margin-right: -1px;
}

---

干杯

我在Firefox和Chrome上看到了同样的问题。这种变通方法适合我。