1

在下面的链接中，我想通过添加引导类（和砌体布局模式） 将DIVs 列表转换为 3 列网格。演示 - twitter 引导程序和同位素span4

$('#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 列进入下一行。我尝试减少引导span4宽度，但这没有任何区别。

4

2 回答 2

3

2019 年更新

引导程序 4

现在 Bootstrap 4 使用 flexbox，您需要使用fitRowsMasonry/Isotope 的布局：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 / 同位素示例：http : //www.bootply.com/60295

于 2013-04-30T02:13:55.757 回答
1

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

http://isotope.metafizzy.co/

于 2015-08-22T14:01:41.920 回答