10

使用 twitter 引导程序，我试图弄清楚为什么最后一个“列”会换行。

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

4

1 回答 1

9

你是正确的 span4 是 300px，但我相信你的 HTML 有错误。

您需要将嵌套列包装在新的 .row 类中。当你这样做时，包装停止。有关使用默认（非流体）引导网格的示例， 请参见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 -->

对于固定网格，嵌套行中的列数应与父列中的列数相加（即本例中的列数）

如果您使用流体网格（即行流体），则嵌套行中的列数应加起来为 12。

于 2012-12-27T04:45:54.527 回答