引导相结合行（行跨度）引导相结合行（行跨度）(Bootstrap combining rows (r

我测试Twitter的引导和卡住了与行基本脚手架。 我重新审视的时候他们的文档数量，我可以看到嵌套列，您可以在一列中基本上窝列，但我无法找到行相结合的能力，为一，并用它列旁边的未结合的行对齐。

下面的图片应该说明我想要完成的任务。

我碰到的唯一解决方法解决方案是使用表，但我的观点是，反应不会与使用表的工作，我不喜欢这个主意。

没有人有任何优雅的解决方案呢？ 大多数网络布局我需要的灵活性精细程度，因此将是巨大的，如果我能在这里拿起一些有用的东西。

Answer 1:

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> 

这里的小提琴 。

Answer 2:

您应该使用自举列嵌套。

看到引导3或自举4 ：

<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/

（在小提琴屏幕，放大你的测试屏幕看到的结果，因为我使用MD同事- *，然后响应堆列）

注 ：我不知道，BS2允许列筑巢 ，但在保罗凯斯特的答案，不使用嵌套列。 您应该使用它，并避免reinvente CSS，同时引导做得很好。

列高度是汽车，如果你加入第二行（就像我在我的例子做），柱高度适应本身。

Answer 3:

注意：这是为引导2（相关，当被问的问题）。

您可以通过完成此row-fluid ，使流体（百分比）基于行现有的内部block 。

<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后的第一个。 这可以固定一个小CSS的调整（它是适用于第一个孩子，扩大到那些过去的第一个孩子相同的CSS）：

.row-fluid [class*="span"] {
    margin-left: 0;
}

Answer 4:

检查这一项。 希望这将有助于充分为您服务。

http://jsfiddle.net/j6amM/

.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;}

Answer 5:

保罗的答案似乎击败引导的目的; 这被响应视/屏幕尺寸。

通过嵌套的行和列就可以达到同样的效果，同时保留响应。

下面是一个向上的最新回应这个问题;

 <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> 

您可以在这里查看codepen。

Answer 6:

 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> 

文章来源: Bootstrap combining rows (rowspan)