引导合并行(行跨度)

我正在测试 Bootstrap，结果被卡住了 带行的基本脚手架。我重新访问了他们的文档数量，我可以看到嵌套列，基本上可以嵌套列中的一列，但我不能找到 将行组合成一行并使其与未组合行旁边的列对齐的能力。

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

rowspan layout sample

我遇到的唯一解决方案是使用表格，但我不喜欢这个想法 因为我的观点是，响应性不适用于表的使用。

有人有什么好办法吗？ 我做的大多数网页布局将需要良好的灵活性，所以它将是伟大的，如果我可以拿起一些有用的东西在这里。

296424 次浏览
小开

注意: 这是为 Bootstrap 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;
}
小开

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

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;}
小开
最佳答案

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

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>

产出:

enter image description here

这是 小提琴。

小开

您应该使用引导程序列嵌套。

见 鞋带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/

(在 Fiddle screen 中，放大测试屏幕以查看结果，因为我使用 col医学博士-* ，然后是响应堆栈列)

注意 : 我不确定 BS2是否允许 柱子嵌套，但是在 Paul Keister 的回答中，没有使用列嵌套。您应该使用它，并避免重新发明 CSS，而引导程序做得很好。

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

小开

Paul 的回答似乎违背了 bootstrap 的初衷，即对视图/屏幕大小做出响应。

通过嵌套行和列，您可以实现相同的结果，同时保持响应性。

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

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

你可以 在这里查看 Codeen。

小开 

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>


提交答案