我正在测试推特引导程序 http://twitter.github.io/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>
Output:
Here's 小提琴 http://jsfiddle.net/pkpjpm/DRanJ/.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
