javascript - 在 bootstrap 网格中将 div 包裹在大 div 周围

Question

我需要一些帮助来解决复杂的 CSS 布局问题。如果它可以只用 CSS 而不是 javascript 来完成，那将是理想的。

• 我需要一个具有不同高度的产品网格
• 还有一个“特色产品”，其高度是其中一种常规产品的 2 倍
• 不同视口(viewport)上的布局需要与下面的图片相匹配

到目前为止我尝试了什么:

这是我现在的代码示例:

<div class="container">
<div class="row">
  <div class="l-product large col-xs-6 col-sm-6 col5-md-2 ">
    1
    <br>This div should be double the height of one tile without fixing the height with CSS
  </div>
  <div class="l-product taller col-xs-6 col-sm-3 col5-md-1">
    2
    <br><span>If one div is taller the whole grid breaks</span>
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    3
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    4
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    5
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    6
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    7
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    8
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    9
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    10
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    11
  </div>
</div>

http://codepen.io/anon/pen/pJBbPN

• 我正在使用 bootstrap，所以我尝试像这样嵌套行 Nested rows with bootstrap grid system?我的问题是我无法弄清楚如何让元素在不同的视口(viewport)中从一行移动到另一行，这导致网格中断

桌面:

平板电脑:

小型平板电脑:

手机:

Answer 1

我不确定您是否可以使用基本的 Bootstrap 来做到这一点。我建议使用更高级的技术，如 Masonry .当您转到示例链接时，更改浏览器宽度。它还添加了一些不错的动画效果。

// external js: masonry.pkgd.js

$(document).ready(function() {

  $('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: 130
  });

});

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
  background: #EEE;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-item {
  width: 120px;
  height: 120px;
  float: left;
  background: #D26;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
  margin: 5px;
}

.grid-item--width2 { width: 250px; }

.grid-item--height2 { height: 250px; }

<h1>Masonry - columnWidth</h1>

<div class="grid">
  <div class="grid-item grid-item--width2 grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>