如何在Bootstrap 3上创建这个网格系统？

Question

首先看图片：

现在我有1列4列（col-md-3）：1,2,3,4,5和6是现在是6的元素，但将来会更多（10,12。 ..），“过滤器”是一个词缀div（当滚动时，保持在顶部）。

问题是：当我添加4,5和6个元素时，不要像图片中那样定位，图片中的红色框不会增长......

我不想要2行（1,2和3为1行，4,5和6为其他行）。

我该怎么做？

Answer 1

这是我的解决方案

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-8" style="background:red">
    <div class="col-md-3" style="background:purple">
      <div style="background:yellow; height:100px; border:solid black 3px"></div>
    </div>
    <div class="col-md-3" style="background:purple">
      <div style="background:yellow; height:100px; border:solid black 3px"></div>
    </div>
    <div class="col-md-3" style="background:purple">
      <div style="background:yellow; height:100px; border:solid black 3px"></div>
    </div>
    <div class="col-md-3" style="background:purple">
      <div style="background:yellow; height:100px; border:solid black 3px"></div>
    </div>
    <div class="col-md-3" style="background:purple">
      <div style="background:yellow; height:100px; border:solid black 3px"></div>
    </div>
  </div>

  <div class="col-md-4" style="background:blue">
    <div style="background:orange; height:150px; border:solid black 3px"></div>
  </div>
</div>