我正在测试Twitter Bootstrap,并陷入行的基本脚手架。我重新查看了他们的文档次数,可以看到嵌套列,您基本上可以将列嵌套在列中,但是我无法定位将行合并为一个并使其与未合并行旁边的列对齐的功能。
下图应说明我要完成的工作。
我遇到的唯一解决方法是使用表,但我不喜欢这种想法,因为我的观点是,响应性不适用于表。
有人对此有任何优雅的解决方案吗?我要做的大多数Web布局都需要高度的灵活性,因此,如果我能在这里找到有用的东西,那将会很棒。
我正在测试Twitter Bootstrap,并陷入行的基本脚手架。我重新查看了他们的文档次数,可以看到嵌套列,您基本上可以将列嵌套在列中,但是我无法定位将行合并为一个并使其与未合并行旁边的列对齐的功能。
下图应说明我要完成的工作。
我遇到的唯一解决方法是使用表,但我不喜欢这种想法,因为我的观点是,响应性不适用于表。
有人对此有任何优雅的解决方案吗?我要做的大多数Web布局都需要高度的灵活性,因此,如果我能在这里找到有用的东西,那将会很棒。
Answers:
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>
这是小提琴。
1row=25px
,2row=50px
。您可以将跨度div设置为与整行一样高吗?尝试添加,.row{height:100%;}
但没有成功。
您应该使用引导程序列嵌套。
<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屏幕中,放大测试屏幕以查看结果,因为我使用的是colmd- *,然后使用响应堆栈列)
注意:我不确定BS2是否允许列嵌套,但在Paul Keister的回答中,未使用列嵌套。您应该使用它,并避免在引导程序运行良好时重新发明CSS。
列高是自动的,如果您添加第二行(如我在示例中所做的那样),则列高会自动调整。
-md-
响应规则。您必须放大屏幕才能看到预期的结果。如果需要跨度在较小的屏幕上显示为列,请替换-md-
为-sm-
或-xs-
。这是一个断点问题(请参阅bootstrapdocs.com/v3.0.3/docs/css/#grid)。
注意:这是用于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相同,并且扩展到超过第一个孩子的CSS):
.row-fluid [class*="span"] {
margin-left: 0;
}
row-fluid
何时开始对内部行进行子拆分。
检查这个。希望对您有帮助。
.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>
您可以在此处查看代码笔。
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>