如何使用bootstrap 3网格系统设计自定义网格？

使用bootstrap 3框架，是否可以像下面的图片一样使用网格设计？如何使用bootstrap 3网格系统设计自定义网格？

注：块是图片...

我在这里试过是example

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-4 col-sm-4 col-md-4"> <a class="thumbnail" href="">Box 1</a></div> 
     <div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 2</a></div> 
     <div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 3</a></div> 
     <div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 4</a></div> 
     <div class="clearfix visible-md"></div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-4 col-md-4 col-md-offset-4"> <a class="thumbnail" href="">Box 5</a></div> 
     <div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 6</a></div> 
     <div class="clearfix visible-md"></div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 8</a></div> 
     <div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 9</a></div> 
     <div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 10</a></div> 
     <div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 11</a></div> 
     <div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 12</a></div> 
     <div class="clearfix visible-md"></div> 
    </div> 
</div><!-- /.container -->

来源

2014-01-27 user472285

是的，这是可能的。你的问题到底是什么？你试过什么了？ – ZimSystem

我编辑了我的问题，向您展示我试过的方法 – user472285

尝试......

<div class="container"> 
    <div class="row no-gutter"> 
     <div class="col-xs-4 col-xs-offset-1"> 
      <div class="col-xs-12"><a href="#" class="thumbnail"><img src="//placehold.it/600"></a></div> 
      <div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div> 
      <div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div> 
     </div> 
     <div class="col-xs-4"> 
      <div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div> 
      <div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div> 
      <div class="col-xs-12"><a href="#" class="thumbnail"><img src="//placehold.it/600x300"></a></div> 
      <div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div> 
      <div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div> 
     </div> 
     <div class="col-xs-2"> 
      <div class="col-xs-12"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div> 
      <div class="col-xs-12"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div> 
      <div class="col-xs-12"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div> 
     </div> 
    </div> 
</div><!-- /.container -->

CSS来覆盖填充/利润率等。

.row.no-gutter [class*='col-'] { 
    padding-right:0; 
    padding-left:0; 
} 

.row.no-gutter .thumbnail { 
    margin-bottom: 0; 
    padding: 0; 
    margin-right: 0; 
    margin-left: 0; 
} 

.row.no-gutter .thumbnail>img { 
    width: 100%; 
}

演示：http://bootply.com/108971

来源

2014-01-28 09:43:02 ZimSystem

伟大的解决方案，但是尊重booststrap惯例吗？ – user472285

我在这里发布了一个类似的问题http://stackoverflow.com/questions/21630604/how-to-design-a-custom-grid-using-bootstrap-3-grid-system-best-practices – user472285