如何在Bootstrap 3上制作此網格系統？

Question

首先看圖片：

現在我有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為另一行）。

我怎樣才能做到這一點？

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>