twitter-bootstrap-3 - Twitter Bootstrap 3 表单内联文本输入宽度取决于标签宽度

Question

我注意到 Twitter Bootstrap 3 的奇怪行为：输入框的大小取决于其标签的大小，当它们与表单组分组时：

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

这是功能还是错误？解决办法是什么？我需要相同大小的输入框。

Answer 1

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

根据引导文档..

“在 Bootstrap 中，输入、选择和文本区域默认为 100% 宽。要使用内联表单，您必须在其中使用的表单控件上设置宽度。”

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

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

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