Twitter Bootstrap 行嵌套
Posted
技术标签:
【中文标题】Twitter Bootstrap 行嵌套【英文标题】：Twitter Bootstrap Row Nesting 【发布时间】：2012-09-24 11:08:43 【问题描述】：我对 Twitter Bootstrap 和整个网格框架还是个新手，所以如果这看起来是一个非常愚蠢的问题，请多多包涵。
但这是我目前所拥有的in a jsFiddle。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bootstrap</title>
<link rel="stylesheet" href="install_files2/css/bootstrap.css" />
<!-- <link rel="stylesheet"
href="install_files/docs/assets/css/bootstrap-responsive.css" /> -->
</head>
<body>
<div class="container-fluid">
<div class="row-fluid" style="background-color:;">
<div class="span2" style="background-color:red;"></div>
<div class="span2" style="background-color:blue;"></div>
<div class="span2" style="background-color:red;"></div>
<div class="span2" style="background-color:blue;"></div>
<div class="span2" style="background-color:red;"></div>
<div class="span1" style="background-color:blue;min-height:100px;">
</div>
<div class="span1" style="background-color:red;min-height:100px;">
</div>
<div class="span2" style="background-color:blue;"></div>
</div>
</div>
</body>
</html>
CSS
/*!
* Bootstrap v2.1.1
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
.clearfix
*zoom: 1;
.clearfix:before,
.clearfix:after
display: table;
content: "";
line-height: 0;
.clearfix:after
clear: both;
.hide-text
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
.input-block-level
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section
display: block;
audio,
canvas,
video
display: inline-block;
*display: inline;
*zoom: 1;
audio:not([controls])
display: none;
html
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
a:focus
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
a:hover,
a:active
outline: 0;
sub,
sup
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
sup
top: -0.5em;
sub
bottom: -0.25em;
img
/* Responsive images (ensure images don't scale beyond their parents) */
max-width: 100%;
/* Part 1: Set a maxium relative to the parent */
width: auto\9;
/* IE7-8 need help adjusting responsive images */
height: auto;
/* Part 2: Scale the height according to the width, */
/* otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
#map_canvas img
max-width: none;
button,
input,
select,
textarea
margin: 0;
font-size: 100%;
vertical-align: middle;
button,
input
*overflow: visible;
line-height: normal;
button::-moz-focus-inner,
input::-moz-focus-inner
padding: 0;
border: 0;
button,
input[type="button"],
input[type="reset"],
input[type="submit"]
cursor: pointer;
-webkit-appearance: button;
input[type="search"]
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button
-webkit-appearance: none;
textarea
overflow: auto;
vertical-align: top;
body
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
background-color: #ffffff;
a
color: #0088cc;
text-decoration: none;
a:hover
color: #005580;
text-decoration: underline;
.img-rounded
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
.img-polaroid
padding: 4px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
.img-circle
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
.row
margin-left: -20px;
*zoom: 1;
.row:before,
.row:after
display: table;
content: "";
line-height: 0;
.row:after
clear: both;
[class*="span"]
float: left;
min-height: 1px;
/*margin-left: 20px;*/
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container
width: 940px;
.span12
width: 940px;
.span11
width: 860px;
.span10
width: 780px;
.span9
width: 700px;
.span8
width: 620px;
.span7
width: 540px;
.span6
width: 460px;
.span5
width: 380px;
.span4
width: 300px;
.span3
width: 220px;
.span2
width: 140px;
.span1
width: 60px;
.offset12
margin-left: 980px;
.offset11
margin-left: 900px;
.offset10
margin-left: 820px;
.offset9
margin-left: 740px;
.offset8
margin-left: 660px;
.offset7
margin-left: 580px;
.offset6
margin-left: 500px;
.offset5
margin-left: 420px;
.offset4
margin-left: 340px;
.offset3
margin-left: 260px;
.offset2
margin-left: 180px;
.offset1
margin-left: 100px;
.row-fluid
width: 100%;
*zoom: 1;
.row-fluid:before,
.row-fluid:after
display: table;
content: "";
line-height: 0;
.row-fluid:after
clear: both;
.row-fluid [class*="span"]
display: block;
width: 100%;
min-height: 220px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
/*margin-left: 2.127659574468085%;*/
/**margin-left: 2.074468085106383%;*/
@media (min-width: 800px)
.row
margin-left: -30px;
*zoom: 1;
.row:before,
.row:after
display: table;
content: "";
line-height: 0;
.row:after
clear: both;
[class*="span"]
float: left;
min-height: 1px;
/*margin-left: 30px;*/
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container
width: 1170px;
.span12
width: 1170px;
.span11
width: 1070px;
.span10
width: 970px;
.span9
width: 870px;
.span8
width: 770px;
.span7
width: 670px;
.span6
width: 570px;
.span5
width: 470px;
.span4
width: 370px;
.span3
width: 270px;
.span2
width: 170px;
.span1
width: 70px;
.offset12
margin-left: 1230px;
.offset11
margin-left: 1130px;
.offset10
margin-left: 1030px;
.offset9
margin-left: 930px;
.offset8
margin-left: 830px;
.offset7
margin-left: 730px;
.offset6
margin-left: 630px;
.offset5
margin-left: 530px;
.offset4
margin-left: 430px;
.offset3
margin-left: 330px;
.offset2
margin-left: 230px;
.offset1
margin-left: 130px;
.row-fluid
width: 100%;
*zoom: 1;
.row-fluid:before,
.row-fluid:after
display: table;
content: "";
line-height: 0;
.row-fluid:after
clear: both;
.row-fluid [class*="span"]
display: block;
width: 100%;
min-height: 200px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
/*margin-left: 2.564102564102564%;*/
/**margin-left: 2.5109110747408616%;*/
.row-fluid [class*="span"]:first-child
margin-left: 0;
.row-fluid .span12
width: 100%;
*width: 99.94680851063829%;
.row-fluid .span11
width: 91.45299145299145%;
*width: 91.39979996362975%;
.row-fluid .span10
width: 82.90598290598291%;
*width: 82.8527914166212%;
.row-fluid .span9
width: 74.35897435897436%;
*width: 74.30578286961266%;
.row-fluid .span8
width: 65.81196581196582%;
*width: 65.75877432260411%;
.row-fluid .span7
width: 57.26495726495726%;
*width: 57.21176577559556%;
.row-fluid .span6
width: 48.717948717948715%;
*width: 48.664757228587014%;
.row-fluid .span5
width: 71.42857142857145%;
*width: 71.42857142857145%;
.row-fluid .span4
width: 31.623931623931625%;
*width: 31.570740134569924%;
.row-fluid .span3
width: 23.076923076923077%;
*width: 23.023731587561375%;
.row-fluid .span2
width: 14.28571428571429%;
*width: 14.28571428571429%;
.row-fluid .span1
width: 7.142857142857143%;
*width: 7.142857142857143%;
.row-fluid .offset12
margin-left: 105.12820512820512%;
*margin-left: 105.02182214948171%;
.row-fluid .offset12:first-child
margin-left: 102.56410256410257%;
*margin-left: 102.45771958537915%;
.row-fluid .offset11
margin-left: 96.58119658119658%;
*margin-left: 96.47481360247316%;
.row-fluid .offset11:first-child
margin-left: 94.01709401709402%;
*margin-left: 93.91071103837061%;
.row-fluid .offset10
margin-left: 88.03418803418803%;
*margin-left: 87.92780505546462%;
.row-fluid .offset10:first-child
margin-left: 85.47008547008548%;
*margin-left: 85.36370249136206%;
.row-fluid .offset9
margin-left: 79.48717948717949%;
*margin-left: 79.38079650845607%;
.row-fluid .offset9:first-child
margin-left: 76.92307692307693%;
*margin-left: 76.81669394435352%;
.row-fluid .offset8
margin-left: 70.94017094017094%;
*margin-left: 70.83378796144753%;
.row-fluid .offset8:first-child
margin-left: 68.37606837606839%;
*margin-left: 68.26968539734497%;
.row-fluid .offset7
margin-left: 62.393162393162385%;
*margin-left: 62.28677941443899%;
.row-fluid .offset7:first-child
margin-left: 59.82905982905982%;
*margin-left: 59.72267685033642%;
.row-fluid .offset6
margin-left: 53.84615384615384%;
*margin-left: 53.739770867430444%;
.row-fluid .offset6:first-child
margin-left: 51.28205128205128%;
*margin-left: 51.175668303327875%;
.row-fluid .offset5
margin-left: 45.299145299145295%;
*margin-left: 45.1927623204219%;
.row-fluid .offset5:first-child
margin-left: 42.73504273504273%;
*margin-left: 42.62865975631933%;
.row-fluid .offset4
margin-left: 36.75213675213675%;
*margin-left: 36.645753773413354%;
.row-fluid .offset4:first-child
margin-left: 34.18803418803419%;
*margin-left: 34.081651209310785%;
.row-fluid .offset3
margin-left: 28.205128205128204%;
*margin-left: 28.0987452264048%;
.row-fluid .offset3:first-child
margin-left: 25.641025641025642%;
*margin-left: 25.53464266230224%;
.row-fluid .offset2
margin-left: 19.65811965811966%;
*margin-left: 19.551736679396257%;
.row-fluid .offset2:first-child
margin-left: 17.094017094017094%;
*margin-left: 16.98763411529369%;
.row-fluid .offset1
margin-left: 11.11111111111111%;
*margin-left: 11.004728132387708%;
.row-fluid .offset1:first-child
margin-left: 8.547008547008547%;
*margin-left: 8.440625568285142%;
input,
textarea,
.uneditable-input
margin-left: 0;
.controls-row [class*="span"] + [class*="span"]
margin-left: 30px;
input.span12, textarea.span12, .uneditable-input.span12
width: 1156px;
input.span11, textarea.span11, .uneditable-input.span11
width: 1056px;
input.span10, textarea.span10, .uneditable-input.span10
width: 956px;
input.span9, textarea.span9, .uneditable-input.span9
width: 856px;
input.span8, textarea.span8, .uneditable-input.span8
width: 756px;
input.span7, textarea.span7, .uneditable-input.span7
width: 656px;
input.span6, textarea.span6, .uneditable-input.span6
width: 556px;
input.span5, textarea.span5, .uneditable-input.span5
width: 456px;
input.span4, textarea.span4, .uneditable-input.span4
width: 356px;
input.span3, textarea.span3, .uneditable-input.span3
width: 256px;
input.span2, textarea.span2, .uneditable-input.span2
width: 156px;
input.span1, textarea.span1, .uneditable-input.span1
width: 56px;
.thumbnails
margin-left: -30px;
.thumbnails > li
margin-left: 30px;
.row-fluid .thumbnails
margin-left: 0;
我想要实现的是在白色空间中最后一个红色大盒子之后放置 2 个小盒子。我做了一些研究，我读到它需要在一行中嵌套一行，然后放置一列。但这似乎适用于跨度的非流体应用，即固定宽度。然而，我以百分比测量这些框，并且非常不确定如何继续嵌套这些行。有什么帮助吗？
【问题讨论】：
【参考方案1】：有几种方法可以做到这一点。一种是这样嵌套它们： (http://jsfiddle.net/rdTfe/)
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
Red area here.
<div class="row-fluid">
<div class="span6">
Small box
</div>
<div class="span6">
Small box
</div>
</div>
</div>
</div>
</div>
但是，这将扩展红色容器本身。因此，除非我误解了您想要做什么，否则您实际上并不需要嵌套它们。 (http://jsfiddle.net/rdTfe/1/)
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
Red area here.
</div>
</div>
<div class="row-fluid">
<div class="span6">
Small box
</div>
<div class="span6">
Small box
</div>
</div>
</div>
以这种方式嵌套它们可以确保所有红色框和其他较小框的左右边缘垂直排列。
Bootstrap 3 更新
上面的例子可以这样写：http://jsfiddle.net/9wQ2M/10/
<div class="row">
<div class="col-md-12">
Red area here.
<div class="col-md-6">
Small box
</div>
<div class="col-md-6">
Small box
</div>
</div>
</div>
而且没有嵌套...http://jsfiddle.net/55z7p/3/
<div class="row">
<div class="col-md-12">
Red area here.
</div>
</div>
<div class="row">
<div class="col-md-6">
Small box
</div>
<div class="col-md-6">
Small box
</div>
</div>
【讨论】：
以上是关于Twitter Bootstrap 行嵌套的主要内容，如果未能解决你的问题，请参考以下文章
选择表格行并使用 Twitter Bootstrap 保持突出显示