但这是我到目前为止所拥有的in a jsFiddle.
HTML
<!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 > <div > <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div > </div> <div > </div> <div ></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; /* 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 { @R_404_5553@: 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 { @R_404_5553@: 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.2); -webkit-Box-shadow: 0 1px 3px rgba(0,0.1); -moz-Box-shadow: 0 1px 3px rgba(0,0.1); Box-shadow: 0 1px 3px rgba(0,0.1);}.img-circle { -webkit-border-radius: 500px; -moz-border-radius: 500px; border-radius: 500px;}.row { @R_404_5553@-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; /*@R_404_5553@-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 { @R_404_5553@-left: 980px;}.offset11 { @R_404_5553@-left: 900px;}.offset10 { @R_404_5553@-left: 820px;}.offset9 { @R_404_5553@-left: 740px;}.offset8 { @R_404_5553@-left: 660px;}.offset7 { @R_404_5553@-left: 580px;}.offset6 { @R_404_5553@-left: 500px;}.offset5 { @R_404_5553@-left: 420px;}.offset4 { @R_404_5553@-left: 340px;}.offset3 { @R_404_5553@-left: 260px;}.offset2 { @R_404_5553@-left: 180px;}.offset1 { @R_404_5553@-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; /*@R_404_5553@-left: 2.127659574468085%;*/ /**@R_404_5553@-left: 2.074468085106383%;*/}@media (min-wIDth: 800px) { .row { @R_404_5553@-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; /*@R_404_5553@-left: 30px;*/ } .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 { @R_404_5553@-left: 1230px; } .offset11 { @R_404_5553@-left: 1130px; } .offset10 { @R_404_5553@-left: 1030px; } .offset9 { @R_404_5553@-left: 930px; } .offset8 { @R_404_5553@-left: 830px; } .offset7 { @R_404_5553@-left: 730px; } .offset6 { @R_404_5553@-left: 630px; } .offset5 { @R_404_5553@-left: 530px; } .offset4 { @R_404_5553@-left: 430px; } .offset3 { @R_404_5553@-left: 330px; } .offset2 { @R_404_5553@-left: 230px; } .offset1 { @R_404_5553@-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; /*@R_404_5553@-left: 2.564102564102564%;*/ /**@R_404_5553@-left: 2.5109110747408616%;*/ } .row-fluID [class*="span"]:first-child { @R_404_5553@-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 { @R_404_5553@-left: 105.12820512820512%; *@R_404_5553@-left: 105.02182214948171%; } .row-fluID .offset12:first-child { @R_404_5553@-left: 102.56410256410257%; *@R_404_5553@-left: 102.45771958537915%; } .row-fluID .offset11 { @R_404_5553@-left: 96.58119658119658%; *@R_404_5553@-left: 96.47481360247316%; } .row-fluID .offset11:first-child { @R_404_5553@-left: 94.01709401709402%; *@R_404_5553@-left: 93.91071103837061%; } .row-fluID .offset10 { @R_404_5553@-left: 88.03418803418803%; *@R_404_5553@-left: 87.92780505546462%; } .row-fluID .offset10:first-child { @R_404_5553@-left: 85.47008547008548%; *@R_404_5553@-left: 85.36370249136206%; } .row-fluID .offset9 { @R_404_5553@-left: 79.48717948717949%; *@R_404_5553@-left: 79.38079650845607%; } .row-fluID .offset9:first-child { @R_404_5553@-left: 76.92307692307693%; *@R_404_5553@-left: 76.81669394435352%; } .row-fluID .offset8 { @R_404_5553@-left: 70.94017094017094%; *@R_404_5553@-left: 70.83378796144753%; } .row-fluID .offset8:first-child { @R_404_5553@-left: 68.37606837606839%; *@R_404_5553@-left: 68.26968539734497%; } .row-fluID .offset7 { @R_404_5553@-left: 62.393162393162385%; *@R_404_5553@-left: 62.28677941443899%; } .row-fluID .offset7:first-child { @R_404_5553@-left: 59.82905982905982%; *@R_404_5553@-left: 59.72267685033642%; } .row-fluID .offset6 { @R_404_5553@-left: 53.84615384615384%; *@R_404_5553@-left: 53.739770867430444%; } .row-fluID .offset6:first-child { @R_404_5553@-left: 51.28205128205128%; *@R_404_5553@-left: 51.175668303327875%; } .row-fluID .offset5 { @R_404_5553@-left: 45.299145299145295%; *@R_404_5553@-left: 45.1927623204219%; } .row-fluID .offset5:first-child { @R_404_5553@-left: 42.73504273504273%; *@R_404_5553@-left: 42.62865975631933%; } .row-fluID .offset4 { @R_404_5553@-left: 36.75213675213675%; *@R_404_5553@-left: 36.645753773413354%; } .row-fluID .offset4:first-child { @R_404_5553@-left: 34.18803418803419%; *@R_404_5553@-left: 34.081651209310785%; } .row-fluID .offset3 { @R_404_5553@-left: 28.205128205128204%; *@R_404_5553@-left: 28.0987452264048%; } .row-fluID .offset3:first-child { @R_404_5553@-left: 25.641025641025642%; *@R_404_5553@-left: 25.53464266230224%; } .row-fluID .offset2 { @R_404_5553@-left: 19.65811965811966%; *@R_404_5553@-left: 19.551736679396257%; } .row-fluID .offset2:first-child { @R_404_5553@-left: 17.094017094017094%; *@R_404_5553@-left: 16.98763411529369%; } .row-fluID .offset1 { @R_404_5553@-left: 11.11111111111111%; *@R_404_5553@-left: 11.004728132387708%; } .row-fluID .offset1:first-child { @R_404_5553@-left: 8.547008547008547%; *@R_404_5553@-left: 8.440625568285142%; } input,textarea,.uneditable-input { @R_404_5553@-left: 0; } .controls-row [class*="span"] + [class*="span"] { @R_404_5553@-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 { @R_404_5553@-left: -30px; } .thumbnails > li { @R_404_5553@-left: 30px; } .row-fluID .thumbnails { @R_404_5553@-left: 0; }} 我想要实现的是在白色空间中的最后一个大红色框之后放置2个小盒子.我做了一些研究,我读到它需要在一行中嵌套一行然后放置一列.但这似乎适用于跨度的非流体应用,即固定宽度.然而,我按百分比测量这些盒子,并且我不确定如何继续嵌套这些行.有帮助吗？
解决方法 有几种方法可以做到这一点.一种是将它们嵌套：( http://jsfiddle.net/rdTfe/)
<div > <div > <div > Red area here. <div > <div > Small Box </div> <div > Small Box </div> </div> </div> </div></div>
但是,这将扩展红色容器本身.因此,除非我误解你想做什么,否则你真的不需要嵌套它们.
(http://jsfiddle.net/rdTfe/1/)
<div > <div > <div > Red area here. </div> </div> <div > <div > Small Box </div> <div > Small Box </div> </div></div>
以这种方式嵌套它们可确保所有红色框和其他较小框的左右边缘垂直排列.
bootstrap 3的更新
上述例子可以这样写：http://jsfiddle.net/9wQ2M/10/
<div > <div > Red area here. <div > Small Box </div> <div > Small Box </div> </div> </div>
没有筑巢…… http://jsfiddle.net/55z7p/3/
<div > <div > Red area here. </div> </div> <div > <div > Small Box </div> <div > Small Box </div> </div>总结
以上是内存溢出为你收集整理的html – Twitter Bootstrap行嵌套全部内容，希望文章能够帮你解决html – Twitter Bootstrap行嵌套所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）