如何在Bootstrap 3上制作此网格系统？

Mark Lenders 发表于 Dev

马克·兰德斯

首先看图片：

在此处输入图片说明

现在我有1行4列（col-md-3）：1、2、3、4、5和6是现在是6的元素，但将来会更多（10，12 ...），“ filter”是一个后缀div（滚动时，始终位于最前面）。

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

我不需要2行（1、2和3为1行，而4、5和6为另一行）。

我怎样才能做到这一点？

弗雷德里克·勒·费穆

这是我的解决方案

<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>