bootstrap 网格不同的列高和宽
bootstrap grid different column height and width
我正试图在 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 -->
这是 fiddle：http://jsfiddle.net/9bbw0aL1/2/
我在你的代码中发现了一些拼写错误，你
col-md-3 col-sm-6
也许这是您的目标，但我想 fiddle 的 window 足够小，可以根据 col-sm-value 渲染图像。这对第一行有所帮助。
在第二行你需要使用例如嵌套列（更多信息在这里：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 -->
我正试图在 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 -->
这是 fiddle：http://jsfiddle.net/9bbw0aL1/2/
我在你的代码中发现了一些拼写错误，你
col-md-3 col-sm-6
也许这是您的目标，但我想 fiddle 的 window 足够小，可以根据 col-sm-value 渲染图像。这对第一行有所帮助。
在第二行你需要使用例如嵌套列（更多信息在这里：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 -->