6

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

我正在一个站点上工作并使用 Bootstrap 3 和 Jquery Isotope。我正在使用 Bootstrap 3 的网格将 div 排列成四列。一切都很好，直到我将同位素过滤器应用于 div。这样做之后，在 Chrome 中，它变成了右侧有巨大间隙的三列布局。看起来好像 div 保持相同的宽度——它们只是在三个而不是四个之后中断。令人抓狂的是，在 Safari 中似乎一切正常！

这是差异的说明。Safari（正确）： 苹果浏览器

铬（不正确）： 铬合金

我已经尝试了一切，我发现的唯一“解决方案”是将包含同位素元素的 .container div 上的 padding-left 和 padding-right 更改为 0。但是，我不想这样做，因为那时其他含有同位素的 .container div 将无法正确排列。

我真的非常感谢您提供的任何帮助！我真的想不通这个……我创建了一个基本的 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>

这是同位素脚本：

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

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

</script>
4

1 回答 1

14

在我目前正在工作的项目中遇到了完全相同的问题。仅使用 .col-sm-3，而 2 或 4 可以正常工作。诡异的。

无论如何，它对我来说只是简单地添加以下 CSS 作为 Bootstrap CSS 文件的覆盖：

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

干杯!

于 2013-11-22T22:52:17.050 回答