twitter-bootstrap - 为什么 twitter bootstrap 在表单水平形式中超过了我的跨度

Question

我正在尝试使用 Twitter Bootsrap（即 12 列网格）布置表单。

我有一个两列布局 - 2/3 - 1/3 所以我有一个 2 div，其中 span8 和 span4 作为它们各自的类。

这很好用，但是当我在表单中使用 form-horizo​​ntal 类做同样的事情时，标签似乎更宽，并将文本框推入排水沟。

我怎样才能解决这个问题？

这是 jsfiddle 中的演示。顶部工作正常，第二种形式是奇怪的。

<div class="container">
<form class="">
    <div>This form is fine!</div>
    <div class="row">
      <div class="span8">Span 8</div>
      <div class="span4">Span 4</div>
    </div>
    <div class="row">
        <div class="span8">
            <div class="control-group">
                <label class="control-label">Name</label>
                <div class="controls">
                    <input type="text" class="span8" />
                </div>
            </div>
        </div>

        <div class="span4">
            <div class="control-group">
                <label class="control-label">Age</label>
                <div class="controls">
                    <input type="text" class="span4" />
                </div>
            </div>
        </div>
    </div>
</form>

<form class="form-horizontal">
    <div>This form is broken!</div>
    <div class="row">
      <div class="span8">Span 8</div>
      <div class="span4">Span 4</div>
    </div>
    <div class="row">
        <div class="span8">
            <div class="control-group">
                <label class="control-label">Name</label>
                <div class="controls">
                    <input type="text" class="span6" />
                </div>
            </div>
        </div>

        <div class="span4">
            <div class="control-group">
                <label class="control-label">Age</label>
                <div class="controls">
                    <input type="text" class="span2" />
                </div>
            </div>
        </div>
    </div>
</form>

</div>

这是我的 jsfiddle

Answer 1

查看css，看起来他们在您遇到的情况下没有正确计算出表单字段的宽度。您可以使标签宽度更小（这就是我所做的）或使输入字段更小。

如果您添加此 css，它应该可以解决您的问题：

.form-horizontal .control-label {
    width: 100px;
}
.form-horizontal .controls{
    margin-left: 120px;
}

/* if you are using responsive bootstrap */
@media (max-width: 480px) {
    .form-horizontal .controls {
        margin-left: 0;
    }
}

http://jsfiddle.net/hajpoj/LutqC/1/