Question

在下面的链接中，我想通过添加bootstrap的类DIV（和砌体布局模式）将span4的列表转换为3列网格。 Demo - twitter bootstrap & isotope

$('#grid').on('click', function() {
    $('.item').hide().addClass('span4');
    $('.item:nth-child(3n+1)').css('margin-left', 0); // remove extra margin-lefts
    $('.item').show();
    $('#posts').isotope({
        itemSelector: '.item',
        resizable: false,
        animationEngine: 'best-available'
    });
});
$(window).smartresize(function() {
    $('#posts').isotope('reLayout');
});

但正如您所见，第3列突破了下一行。我尝试减少bootstrap span4宽度，但这没有任何区别。

Answer 1

更新2019

Bootstrap 4

现在Bootstrap 4使用flexbox，您需要使用fitRows布局进行砌体/同位素：https://www.codeply.com/go/zNeDtV9nLE

Bootstrap 3（原始答案）

您提供的示例链接已损坏。我用于Bootstrap和Isotope的方法是使用bootstrap-responsive.css和自定义媒体查询（在CSS中）在浏览器视口更改时相应地调整同位素单元格（Bootstrap .span3 DIV）的大小。

这些是我调整的@media查询：

@media (min-width: 768px) and (max-width: 980px) {
  .span3 {
    width: 352px;
  }
}

@media (min-width: 980px) and (max-width: 1200px) {
  .span3 {
    width: 300px;
  }
}

@media (min-width: 1200px) {
  .span3 {
    width: 270px;
  }
}

Bootply上的完整Bootstrap / Isotope示例：http://www.bootply.com/60295

Answer 2

使用最新版本的同位素。整合错误已修复！

http://isotope.metafizzy.co/

将bootstrap与同位素结合起来

2 个答案: