bootstrap網格不同列高度和寬度

Question

我試圖在bootstrap上實現這一點： http://s2.postimg.org/nrbrjp4xl/layout.png 最後兩列留有距離，我希望它們全部疊加。我怎樣才能解決這個問題？

這裏是我的代碼上的jsfiddle樣本：JSFiddle

這裏是代碼：

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { 
 
    padding-left: 0; 
 
    padding

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!-- Static navbar --> 
 

 
<nav class="navbar navbar-default navbar-static-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 
 
     <a class="navbar-brand" href="#"><img src="https://placeimg.com/30/30/arch/grayscale"> </a> </div> 
 
    <div id="navbar" class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Culture</a></li> 
 
     <li><a href="#">Stories</a></li> 
 
     <li><a href="#">Clients</a></li> 
 
     <li class="no-dash"><a href="#"><span class="glyphicon glyphicon-earphone"></span></a></li> 
 
     <li class="no-dash"><a href="#"><span class="glyphicon glyphicon-map-marker"></span></a></li> 
 
     <li class="no-dash"><a href="#"><span class="glyphicon glyphicon-search"></span></a></li> 
 
     </ul> 
 
    </div> 
 
    <!--/.nav-collapse --> 
 
    </div> 
 
</nav> 
 
<div class="container-fluid full-height"> 
 
    <div class="row"> 
 
    <div class="col-md-6 col-sm-6 feature-item"> <a class="thumbnail" href="#"> <img class="img-responsive" src="https://placeimg.com/640/640/arch/grayscale" alt=""> </a> </div> 
 
    <!-- /col-md-3 --> 
 
    <div class="col-md-3 col-sm-6 feature-item"> <a class="thumbnail" href="#"> <img class="img-responsive" src="https://placeimg.com/640/640/arch/grayscale" alt=""> </a> </div> 
 
    <!-- /col-md-3 --> 
 
    <div class="col-md-3 col-sm-6 feature-item"> <a class="thumbnail" href="#"> <img class="img-responsive" src="https://placeimg.com/640/640/arch/grayscale" alt=""> </a> </div> 
 
    <!-- /col-md-3 --> 
 
    <div class="col-md-3 col-sm-6 feature-item"> <a class="thumbnail" href="#"> <img class="img-responsive" src="https://placeimg.com/640/640/arch/grayscale" alt=""> </a> </div> 
 
    <!-- /col-md-3 --> 
 
    <div class="col-md-3 col-sm-6 feature-item"> <a class="thumbnail" href="#"> <img class="img-responsive" src="https://placeimg.com/640/640/arch/grayscale" alt=""> </a> </div> 
 
    <!-- /col-md-3 --> 
 
    <div class="col-md-3 col-sm-6 feature-item"> <a class="thumbnail" href="#"> <img class="img-responsive" src="https://placeimg.com/640/640/arch/grayscale" alt=""> </a> </div> 
 
    <!-- /col-md-3 --> 
 
    <div class="col-md-3 col-sm-6 feature-item"> <a class="thumbnail" href="#"> <img class="img-responsive" src="https://placeimg.com/640/640/arch/grayscale" alt=""> </a> </div> 
 
    <!-- /col-md-3 --> 
 
    <div class="col-md-6 col-sm-6 feature-item"> <a class="thumbnail" href="#"> <img class="img-responsive" src="https://placeimg.com/640/640/arch/grayscale" alt=""> </a> </div> 
 
    <!-- /col-md-3 --> 
 
    <div class="col-md-3 col-sm-6 feature-item"> <a class="thumbnail" href="#"> <img class="img-responsive" src="https://placeimg.com/640/640/arch/grayscale" alt=""> </a> </div> 
 
    <!-- /col-md-3 --> 
 
    <div class="col-md-3 col-sm-6 feature-item"> <a class="thumbnail" href="#"> <img class="img-responsive" src="https://placeimg.com/640/640/arch/grayscale" alt=""> </a> </div> 
 
    <!-- /col-md-3 --> 
 
    </div> 
 
    <!-- /row --> 
 
</div> 
 
<!-- /container-fluid -->

Answer 1

這裏的小提琴：http://jsfiddle.net/9bbw0aL1/2/

我看上了在你的代碼中很少有錯別字，你有

col-md-3 col-sm-6 

也許這是你的目標，但我想小提琴的窗口足夠小，可以根據col-sm值渲染圖像。這有助於第一排。

在第二行中，您需要使用例如（更多信息在這裏：http://getbootstrap.com/2.3.2/scaffolding.html）

<!-- Static navbar --> 
<nav class="navbar navbar-default navbar-static-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> 
      </button> <a class="navbar-brand" href="#"><img src="https://placeimg.com/30/30/arch/grayscale"> </a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">Culture</a> 
       </li> 
       <li><a href="#">Stories</a> 
       </li> 
       <li><a href="#">Clients</a> 
       </li> 
       <li class="no-dash"><a href="#"><span class="glyphicon glyphicon-earphone"></span></a> 
       </li> 
       <li class="no-dash"><a href="#"><span class="glyphicon glyphicon-map-marker"></span></a> 
       </li> 
       <li class="no-dash"><a href="#"><span class="glyphicon glyphicon-search"></span></a> 
       </li> 
      </ul> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 
</nav> 
<div class="container-fluid full-height"> 
    <div class="row"> 
     <div class="col-md-6 col-sm-6 feature-item"> <a class="thumbnail" href="#"> <img class="img-responsive" src="https://placeimg.com/640/640/arch/grayscale" alt=""> </a> 
     </div> 
     <div class="col-md-3 col-sm-3 feature-item"> <a class="thumbnail" href="#"> <img class="img-responsive" src="https://placeimg.com/640/640/arch/grayscale" alt=""> </a> 
     </div> 
     <div class="col-md-3 col-sm-3 feature-item"> <a class="thumbnail" href="#"> <img class="img-responsive" src="https://placeimg.com/640/640/arch/grayscale" alt=""> </a> 
     </div> 
     <div class="col-md-3 col-sm-3 feature-item"> <a class="thumbnail" href="#"> <img class="img-responsive" src="https://placeimg.com/640/640/arch/grayscale" alt=""> </a> 
     </div> 
     <div class="col-md-3 col-sm-3 feature-item"> <a class="thumbnail" href="#"> <img class="img-responsive" src="https://placeimg.com/640/640/arch/grayscale" alt=""> </a> 
     </div> 
     <div class=" col-md-6 col-sm-6"> 
      <div class="col-md-6 col-sm-6 feature-item"> <a class="thumbnail" href="#"> <img class="img-responsive" src="https://placeimg.com/640/640/arch/grayscale" alt=""> </a> 
      </div> 
      <div class="col-md-6 col-sm-6 feature-item"> <a class="thumbnail" href="#"> <img class="img-responsive" src="https://placeimg.com/640/640/arch/grayscale" alt=""> </a> 
      </div> 
      <div class="col-md-6 col-sm-6 feature-item"> <a class="thumbnail" href="#"> <img class="img-responsive" src="https://placeimg.com/640/640/arch/grayscale" alt=""> </a> 
      </div> 
      <div class="col-md-6 col-sm-6 feature-item"> <a class="thumbnail" href="#"> <img class="img-responsive" src="https://placeimg.com/640/640/arch/grayscale" alt=""> </a> 
      </div> 
     </div> 
     <div class="col-md-6 col-sm-6 feature-item"> <a class="thumbnail" href="#"> <img class="img-responsive" src="https://placeimg.com/640/640/arch/grayscale" alt=""> </a> 
     </div> 
    </div> 
    <!-- /row --> 
</div> 
<!-- /container-fluid -->