Bootstrap组合行（rowspan）
我正在testingTwitter Bootstrap，并用基本脚手架卡住了行。 我重新访问了他们的文档的次数，我可以看到嵌套列，你基本上可以在列中嵌套列，但我找不到将行组合到一个列中的能力，并使它与未组合列的旁边的列alignment。
下面的图片应该说明我想要完成的事情。
我遇到的唯一的解决方法是使用表，但我不喜欢这个想法，因为我的观点是响应性不适用于使用表。
有没有人有任何优雅的解决scheme呢？ 我所做的大多数网页布局都需要很好的灵活性，所以如果我能在这里find有用的东西，那将是非常好的。
默认情况下，Div垂直堆栈，因此不需要对列中的“行”进行特殊处理。
div { height:50px; } .short-div { height:25px; } <link href="ajax/libs/twitter-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>
您应该使用引导列嵌套。
请参阅http://getbootstrap.com/css/#grid-nesting
在Bootstrap 3：
<div class="row"> <div class="col-md-5">Span 5</div> <div class="col-md-3">Span 3<br />second line</div> <div class="col-md-2"> <div class="row"> <div class="col-md-12">Span 2</div> </div> <div class="row"> <div class="col-md-12">Span 2</div> </div> </div> <div class="col-md-2">Span 2</div> </div> <div class="row"> <div class="col-md-6"> <div class="row"> <div class="col-md-12">Span 6</div> <div class="col-md-12">Span 6</div> </div> </div> <div class="col-md-6">Span 6</div> </div>
http://jsfiddle.net/DRanJ/125/
（在Fiddle屏幕中，放大您的testing屏幕以查看结果，因为Im使用coldd – *，然后响应堆栈列）
注意 ：我不确定BS2是否允许列嵌套 ，但是在Paul Keister的答案中，没有使用列嵌套。 你应该使用它，并避免重新启动CSS，而bootstrap做得很好。
列的高度是自动的，如果你添加第二行（就像我在我的例子中那样），列高度自适应。
注意：这是Bootstrap 2（当问题被提问时相关）。
您可以通过使用row-fluid来在现有block内创build基于stream体（百分比）的行来实现此目的。
<div class="row"> <div class="span5">span5</div> <div class="span3">span3</div> <div class="span2"> <div class="row-fluid"> <div class="span12">span2</div> <div class="span12">span2</div> </div> </div> <div class="span2">span2</div> </div> <div class="row"> <div class="span6"> <div class="row-fluid"> <div class="span12">span6</div> <div class="span12">span6</div> </div> </div> <div class="span6">span6</div> </div>
这是一个JSFiddle示例 。
我注意到在第一row-fluid之后， row-fluid内部的跨度出现了（或不出现）一个奇怪的左边距。 这可以通过一个小小的CSS调整来解决（这与应用于第一个孩子的CSS相同，扩展到第一个孩子以前的那些CSS）：
.row-fluid [class*="span"] { margin-left: 0; }
检查这一个。 希望这会对你有帮助。
.row-fix { margin-bottom:20px;} .row-fix > [class*="span"]{ height:100px; background:#f1f1f1;} .row-fix .two-col{ background:none;} .two-col > [class*="col"]{ height:40px; background:#ccc;} .two-col > .col1{margin-bottom:20px;}
保罗的答案似乎打败了引导的目的; 对视口/屏幕尺寸作出响应。
通过嵌套行和列可以达到相同的结果，同时保持响应。
这是对这个问题的一个最新的回应。
<div class="container-fluid"> <h1> Responsive Nested Bootstrap </h1> <div class="row"> <div class="col-md-5" style="background-color:red;">Span 5</div> <div class="col-md-3" style="background-color:blue;">Span 3</div> <div class="col-md-2"> <div class="row"> <div class="container" style="background-color:green;">Span 2</div> </div> <div class="row"> <div class="container" style="background-color:purple;">Span 2</div> </div> </div> <div class="col-md-2" style="background-color:yellow;">Span 2</div> </div> <div class="row"> <div class="col-md-6"> <div class="row"> <div class="container" style="background-color:yellow;">Span 6</div> </div> <div class="row"> <div class="container" style="background-color:green;">Span 6</div> </div> </div> <div class="col-md-6" style="background-color:red;">Span 6</div> </div> </div>
