使用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
那么任何线索呢为什么它包装？
我试图制作多列表单,并希望保持列和行的组织.
谢谢.
解决方法
你是正确的,span4是300px,但我相信你的HTML有一个错误.
您需要将嵌套的列包装在一个新的.row类中.当你这样做时,包装停止.请参阅http://jsfiddle.net/panchroma/UBTv4/和使用默认(非流体)Bootstrap网格的示例.
这是我使用的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 -->
对于固定网格,嵌套行中的列数应加上父列中的列数(即在这种情况下为四个)
如果您使用流体网格(即行流体),则嵌套行中的列数应该最多可以为12.