使用 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的默认宽度会换行呢?
最佳答案
你是正确的 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。
关于twitter-bootstrap - 带有跨度包装的 Twitter Bootstrap 行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13957042/