Twitter bootstrap 引导合并行（rowspan）

我正在测试，被困在 带排的基本脚手架。我多次访问了他们的文档，我可以看到嵌套列，基本上可以在列中嵌套列，但我找不到 将行合并为一行并使其与未合并行旁边的列对齐的功能

下面的图片应该说明我想要完成什么

我遇到的唯一解决办法是使用表，但我不喜欢这个想法 我的观点是，响应性不能与表一起使用

有人有什么优雅的解决办法吗？

---

我所做的大多数web布局都需要很好的灵活性，因此如果我能在这里找到一些有用的东西，那就太好了。

注意：这是针对Bootstrap 2的（当有人问这个问题时相关）

可以通过使用

行流体

在现有

块

内创建基于流体（百分比）的行来完成此操作

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

---

看看这个。希望这对你有帮助

---

默认情况下，div垂直堆叠，因此不需要对列中的“行”进行特殊处理

div{
高度：50px；
}
.短款{
高度：25px；
}

响应引导
跨度5
跨度3
跨度2
跨度2
跨度2
跨度6
跨度6
跨度6

您应该使用引导列嵌套。

见或：

跨度5
跨度3
第二行
跨度2
跨度2
跨度2
跨度6
跨度6
跨度6

（在Fiddle screen中，放大测试屏幕以查看结果，因为我使用的是col-md-*，然后是响应堆栈列）

注意：我不确定BS2是否允许列嵌套，但在Paul Keister的回答中，没有使用列嵌套。您应该使用它，并避免在bootstrap做得很好的时候重新整合css

---

列的高度是自动的，如果您添加第二行（就像我在我的示例中所做的），列的高度会自动调整。

Paul的回答似乎违背了引导的目的；对视口/屏幕大小作出响应的能力

通过嵌套行和列，可以获得相同的结果，同时保持响应性

以下是对这个问题的最新回应

响应嵌套引导
跨度5
跨度3
跨度2
跨度2
跨度2
跨度6
跨度6
跨度6

div{
高度：50px；
}
.短款{
高度：25px；
}

响应引导
跨度5
跨度3
跨度2
跨度2
跨度2
跨度6
跨度6
跨度6

感谢您的努力，但按照我所选答案的建议，行似乎不必使用行流体来完成此任务。不过我真的很感激！非常正确，但是当开始对内部行进行子拆分时，请不要忘记

行流体

。非常感谢。这就是我要找的！我希望引导文档在嵌套列下另外提到这一点，因为方法基本相同。在您的示例中，您定义了

1row=25px

，

2row=50px

。你能使跨距div和整行一样高吗？尝试添加

.row{height:100%；}

但没有成功。是的，@carter原始示例不符合bootstrap3；我已经纠正了它。这个例子在第二行有水槽，看起来很奇怪。这应该是公认的答案，因为它使用开箱即用的引导，不需要任何CSS调整。公认的答案更具可读性；它包含一个代码片段和一个指向JSfiddle的链接，IMHO Paul Keister的示例比Alcalyn的示例更清晰。这就是为什么我认为应该保留Paul Keister的答案作为公认的答案，至少在Alcalyn的答案得到改进之前。@Alcalyn在我的浏览器（Chrome）中，您答案中链接的小提琴不会产生预期的结果（参见问题中的图片）。实际结果是所有div在一列中对齐。如果您看到一列具有所有对齐跨距，这是因为

-md-

响应规则。您必须放大屏幕才能看到预期结果。如果需要跨距在较小屏幕上显示为列，请将

-md-

替换为

-sm-

或

-xs-

。这是一个断点问题（请参阅）。这不适用于我，请在代码周围添加解释。所以OP和未来的读者可以很容易地理解你的答案。我只选了span2，它工作得很好，

Span 2 Span 2 Span 2

使用CSS

.short div{height:50px；}

Nice snippet@SUDIPSINGH

.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="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>