Question

我只是尝试使用Isotope实现Bootstrap 3而我遇到了这个问题，当从小到大调整浏览器时，网格项目的分辨率正好达到1200px并且相互重叠：

http://i.imgur.com/h1HFjJD.jpg

在一个像素宽度较小的情况下，项目（@ 1199px）看起来像这样：

http://i.imgur.com/shc3CST.jpg

我到处搜索，但很多人似乎有类似的问题但不完全是这样。

这里还有一点html：

<div id="container">

    <div class="col-sm-6 col-md-3 item metal transition">
        <a href="portfolio-item.html"><img class="img-responsive -img-bot-margin" src="img/img1.jpg"></a>
    </div>

    ...

</div>

这是jquery：

  $(function(){

    var $container = $('#container');

    $container.imagesLoaded( function(){  
      $container.isotope({
        itemSelector : '.item'
      });
    });

  });

无论是否将列放入行中，问题都是一样的。在这里，我正在等待图像在启动同位素之前加载。如果我不这样做，问题也是一样的。

如果你能说出什么问题，请告诉我。非常感谢。

Answer 1

HTML CODE

<div id="container">

<div class="col-sm-6 col-md-3 item metal transition">
    <a href="portfolio-item.html"><img class="img-responsive -img-bot-margin" src="img/img1.jpg"></a>
</div>

...



$(function() {

  var $container = $('#container');

   $container.imagesLoaded().done(function(instance) {

     $container.isotope({
        itemSelector: '.item'
      });

    });

});

它为我工作:)）

使用Bootstrap 3和Isotope砌体布局时，网格项会卡住

1 个答案: