twitter-bootstrap Bootstrap 合并行（rowspan）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16351404/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap combining rows (rowspan)
提问by Seong Lee
I am testing Twitter Bootstrapand got stuck with basic scaffolding with rows. I revisited their documentation number of times and I can see nesting columns where you can basically nest columns within a column but I cannot locate the capability of combining rows into one and have it aligned with column next to the uncombined rows.
我正在测试Twitter Bootstrap，但遇到了基本的行脚手架问题。我多次重新访问他们的文档，我可以看到嵌套列，您基本上可以在列中嵌套列，但我无法找到将行合并为一个的功能并将其与未合并行旁边的列对齐。
Below picture should illustrate what I want to accomplish.
下面的图片应该说明我想要完成的事情。
The only workaround solution I came across is using tables but I don't like this idea as my view is that the responsiveness wouldn't work with the use of tables.
我遇到的唯一解决方法是使用表格，但我不喜欢这个想法，因为我的观点是响应性不适用于使用表格。
Does anyone have any elegant solution to this? Most of the web layout I do will need fine level of flexibility so it will be great if I could pick up something useful here.
有没有人对此有任何优雅的解决方案？我所做的大部分网页布局都需要很好的灵活性，所以如果我能在这里找到一些有用的东西，那就太好了。
采纳答案by Paul Keister
Divs stack vertically by default, so there is no need for special handling of "rows" within a column.
默认情况下，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>Here's the fiddle.
这是小提琴。
回答by Alcalyn
You should use bootstrap column nesting.
您应该使用引导列嵌套。
See Bootstrap 3or Bootstrap 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/
http://jsfiddle.net/DRanJ/125/
(In Fiddle screen, enlarge your test screen to see the result, because I'm using col-md-*, then responsive stacks columns)
（在 Fiddle 屏幕中，放大您的测试屏幕以查看结果，因为我使用的是 col- md-*，然后响应式堆叠列）
Note: I am not sure that BS2 allows columns nesting, but in the answer of Paul Keister, the columns nesting is not used. You should use it and avoid to reinvente css while bootstrap do well.
注意：我不确定 BS2 是否允许列嵌套，但在 Paul Keister 的回答中，没有使用列嵌套。你应该使用它并避免在 bootstrap 做得好的时候重新发明 css。
The columns height are auto, if you add a second line (like I do in my example), column height adapt itself.
列高度是自动的，如果添加第二行（就像我在我的示例中所做的那样），列高度会自行调整。
回答by pickypg
Note: This was for Bootstrap 2 (relevant when the question was asked).
注意：这是针对 Bootstrap 2（在提出问题时相关的）。
You can accomplish this by using row-fluidto make a fluid (percentage) based row inside an existing block.
您可以通过使用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>
Here's a JSFiddle example.
这是一个JSFiddle 示例。
I did notice that there was an odd left margin that appears (or does not appear) for the spans inside of the row-fluidafter the first one. This can be fixed with a small CSS tweak (it's the same CSS that is applied to the first child, expanded to those past the first child):
我确实注意到row-fluid在第一个之后的跨度内出现（或不出现）一个奇怪的左边距。这可以通过一个小的 CSS 调整来修复（它与应用于第一个孩子的 CSS 相同，扩展到第一个孩子之后的那些）：
.row-fluid [class*="span"] {
margin-left: 0;
}
回答by Manish Sharma
Check this one. hope it will help full for you.
检查这个。希望对你有帮助。
.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;}
回答by vasavest
Paul's answer seems to defeat the purpose of bootstrap; that of being responsive to the viewport / screen size.
保罗的回答似乎违背了引导程序的目的；响应视口/屏幕尺寸。
By nesting rows and columns you can achieve the same result, while retaining responsiveness.
通过嵌套行和列，您可以获得相同的结果，同时保持响应能力。
Here is an up-to-date response to this problem;
这是对此问题的最新回应；
<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>You can view the codepen here.
您可以在此处查看代码笔。
回答by SUDIP SINGH
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>