Twitter引导行与跨度换行

Question

使用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默认宽度换行？

Answer 1

你是正确的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.