我测试
Twitter Bootstrap和卡住了
基本脚手架与行。我重读了他们的文档次数，我可以看到嵌套列，你可以在一个列中基本上嵌套列，但我找不到
将行组合成一个并使其与未组合行旁边的列对齐的能力。
基本脚手架与行。我重读了他们的文档次数，我可以看到嵌套列，你可以在一个列中基本上嵌套列，但我找不到
将行组合成一个并使其与未组合行旁边的列对齐的能力。
下图应该说明我想要完成的事情。
我遇到的唯一的解决方案解决方案是使用表，但我不喜欢这个想法
因为我的观点是响应性不会使用表。
有人有任何优雅的解决方案吗？
我做的大部分网页布局都需要很好的灵活性，所以如果我能在这里找到有用的东西，那么这将是巨大的。
解决方法
Div默认情况下垂直堆叠，因此不需要对列中的“行”进行特殊处理。
div {
height:50px;
}
.short-div {
height:25px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h1>Responsive Bootstrap</h1>
<div class="row">
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-color:red;">Span 5</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="padding:0px">
<div class="short-div" style="background-color:green">Span 2</div>
<div class="short-div" style="background-color:purple">Span 2</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="background-color:yellow">Span 2</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="short-div" style="background-color:#999">Span 6</div>
<div class="short-div">Span 6</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color:#ccc">Span 6</div>
</div>
</div>
这里是the fiddle。