使用Jquery Isotope时在Chrome中使用Bootstrap 3列的问题(但在Safari中很好!)

Question

我花了好几天时间试图解决这个问题而且我的智慧结束了.如果有人有任何见解,我将非常,非常感激.

我正在一个网站上工作并使用Bootstrap 3和Jquery Isotope.我使用Bootstrap 3的网格来排列四列div.一切都很好,直到我将同位素过滤器应用于div.在这之后,在Chrome中,它变为三列布局,右侧有巨大的间隙.似乎div保持相同的宽度 - 它们只是在三个而不是四个之后断开.令人抓狂的是,Safari中的一切似乎都运行良好!

以下是差异的说明.Safari(正确):

Chrome(不正确):

我已经尝试了所有的东西,我找到的唯一"解决方案"是将包含Isotope元素的.container div上的padding-left和padding-right更改为0.我不想这样做,但是,因为那时候其他含同位素的.container divs将无法正常排列.

我真的非常感谢你能给予的任何帮助!我真的无法想出这个...我已经创建了一个基本的Jsfiddle来说明:

http://jsfiddle.net/kECqL/5/

这是基本的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>

这是Isotope脚本:

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

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

</script>

Answer 1

在我正在工作的项目中遇到完全相同的问题.只有.col-sm-3,而2或4才能正常工作.奇怪的.

无论如何,它对我来说只是在Bootstrap CSS文件中添加以下CSS作为覆盖:

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

干杯!