在引导网格中将 div 包裹在大 div 周围

Question

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

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

到目前为止我所做的尝试：

这是我现在的代码示例：

<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

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

桌面：

平板电脑：

小型平板电脑：

手机：

Answer 1

我不确定您是否可以使用基本引导程序来做到这一点。我建议使用更高级的技术，例如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>

Answer 2

如果您使用列，则需要将列除以 12。所以我们希望有一个偶数，5 不会分解为 12 列。

试试下面看看结果。我在小盒子里加了 6 个盒子。

<div class="container">
        <div class="row">
            <div class="col-xs-6">
                <div class="big-box">image</div>
            </div>
            <div class="col-xs-6">
                <div class="row">
                    <div class="col-xs-4"><div class="mini-box">1</div></div>
                    <div class="col-xs-4"><div class="mini-box">2</div></div>
                    <div class="col-xs-4"><div class="mini-box">3</div></div>

                </div>
                <div class="row">
                    <div class="col-xs-4"><div class="mini-box">1</div></div>
                    <div class="col-xs-4"><div class="mini-box">2</div></div>
                    <div class="col-xs-4"><div class="mini-box">3</div></div>

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2"><div class="mini-box">1</div></div>
            <div class="col-xs-2"><div class="mini-box">2</div></div>
            <div class="col-xs-2"><div class="mini-box">3</div></div>
            <div class="col-xs-2"><div class="mini-box">4</div></div>
            <div class="col-xs-2"><div class="mini-box">5</div></div>
            <div class="col-xs-2"><div class="mini-box">6</div></div>

            </div>
        <div class="row">
            <div class="col-xs-2"><div class="mini-box">1</div></div>
            <div class="col-xs-2"><div class="mini-box">2</div></div>
            <div class="col-xs-2"><div class="mini-box">3</div></div>
            <div class="col-xs-2"><div class="mini-box">4</div></div>
            <div class="col-xs-2"><div class="mini-box">5</div></div>
            <div class="col-xs-2"><div class="mini-box">6</div></div>

        </div>
        </div>

这是jsfiddle

或者你可以使用 jQuery 的网格系统