Twitter bootstrap 为什么twitter引导会在水平表单中超过我的范围

我正在尝试使用twitterbootsrap（即12列网格）设计表单

我有一个两列的布局-2/3-1/3，所以我有一个两个div，分别是span8和span4

这很好，但是当我在表单中使用form horizontal类执行相同的操作时，标签似乎更宽，并将文本框推到了边沟中

我怎样才能解决这个问题

下面是JSFIDLE中的一个演示。上面的部分很好，第二种形式很奇怪

<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>

这个表格很好！
跨度8
跨度4
名称
年龄
这个表格坏了！
跨度8
跨度4
名称
年龄

---

这里是看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;
    }
}

---

尝试为表单类指定一个span12。这并不能令人遗憾地解决问题。