2

我已经解决这个问题几个小时了，我似乎无法让它按照我的预期工作。

我希望使用引导网格像这样设置我的盒子：

在此处输入图像描述

现在由于某种原因，在我使用插件 jQuery Masonry（我用它来处理各种 div 高度）后，它只变成了 2 列。

HTML

  <div class="container" >
    <div id="grid" class="row">

      <div class="span5 box box1">1</div>
      <div class="span4 box box2">2</div>
      <div class="span3 box box3">3</div>

      <div class="span5 box box4">4</div>
      <div class="span4 box box5">5</div>
      <div class="span3 box box6">6</div>      

    </div>
  </div>

CSS

.box { background: #ccc; margin-bottom: 20px; } 

.box1 { height: 290px; }
.box2 { height: 200px; }
.box3 { height: 300px; }

.box4 { height: 250px; }
.box5 { height: 340px }
.box6 { height: 240px }

JS

jQuery(function(){
    jQuery('#grid').masonry({
      itemSelector: '.box',
    });         

});

演示：http: //jsbin.com/afihux/3/

我希望它尽可能地响应，这就是我使用 Twitter Bootstrap 的原因之一。

4

1 回答 1

2

目前，我采用了这种方法：

.box { background: #ccc; position: relative } 

.box1 { height: 290px; }
.box2 { height: 200px; }
.box3 { height: 300px; }
.box4 { height: 250px; top: 10px; }
.box5 { height: 340px; top: -80px; }
.box6 { height: 240px; top: 20px; }


@media (min-width: 1200px) {

.box4 { top: 20px; }
.box5 { top: -70px }
.box6 { top: 30px }

}

@media (max-width: 767px) {
.box { margin-bottom: 20px; top: 0; }
}

演示：http: //jsbin.com/avupok/1

我玩弄了 css top属性来重新调整总布局。

我认为没有必要使用第 3 方 jQuery 插件，因为网格仍然是可管理的（只有 6 个框）。

我还没有测试过带有相对属性的顶级属性是否适用于其他浏览器。我只在 Google Chrome 和 Safari 上测试过它。我感觉它会在某些浏览器中中断。

这是开放的改进。

于 2013-06-02T03:59:08.270 回答