Twitter Bootstrap 3 form-inline文本输入宽度取决于标签宽度

Question

我注意到Twitter Bootstrap 3的奇怪行为:输入框的大小取决于它们与form-group分组时的标签大小:

<form class="form-inline">
    <div class="form-group">
        <label>A</label>
        <input type="text" class="form-control" placeholder="First Name">
        </div>
    <div class="form-group">
        <label>Last Name</label>
        <input type="text" class="form-control" placeholder="Last Name">
    </div>
</form>

这是演示:http://jsfiddle.net/a3vAP/4/

这个功能还是bug？会有什么问题？我需要相同大小的输入框.

Answer 1

较长的标签导致输入更长,因为它们都包含在相同的form-group使用中,display:inline-block因此它会自动调整到宽度label.

根据Bootstrap文档..

"输入,选择和文本区域默认在Bootstrap中是100%宽.要使用内联表单,您必须在其中使用的表单控件上设置宽度."

所以,你需要添加一些简单的CSS来控制宽度..

.form-inline .form-group input {
    width:140px;
}

演示:http://bootply.com/87747