使用twitter bootstrap,我试图找出为什么最后一个“列”包装。
<div class="row span4 solidBottom">
<div class="span1">
<label>A</label>
</div>
<div class="span1">
<label>B</label>
</div>
<div class="span1">
<label>C</label>
</div>
<div class="span1">
<label>D</label>
</div>
</div>
结果是:
A B C
D
___________
SPAN 4 = 300px
Four Span1s = 240
3 Paddings = 60
240 + 60 = 300
关于它为什么包装的任何线索?
我正在尝试创建多列表单,并希望保持列和行的组织。
谢谢。
编辑:在行中添加style="width:auto"
解决了问题,但为什么300px默认宽度换行?
答案 0 :(得分:10)
你是正确的,span4是300px,但我相信你的HTML有错误。
您需要将嵌套列包装在新的.row类中。当你这样做时,包裹停止。有关使用默认(非流体)Bootstrap网格的示例,请参阅http://jsfiddle.net/panchroma/UBTv4/。
这是我用过的HTML:
<div class="container">
<div class="row">
<div class="span4 solidBottom">
<div class="row">
<div class="span1">
<label>A</label>
</div>
<div class="span1">
<label>B</label>
</div>
<div class="span1">
<label>C</label>
</div>
<div class="span1">
<label>D</label>
</div>
</div> <!-- end nested row -->
<div class="span8"> </div>
</div> <!-- end parent row -->
</div> <!-- end container -->
对于固定网格,嵌套行中的列数应该与父列中的列数相加(在这种情况下为4)
如果您使用的是流体网格(即行液),嵌套行中的列数最多应为12个。