Question

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

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

这样可以正常工作，但是当我在带有表单水平类的表单中执行相同的操作时，标签看起来更宽，并将文本框推到排水沟中。

我该如何解决这个问题？

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

这是My 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/

为什么twitter引导程序在表单水平形式时超出我的跨度

1 个答案: