我注意到 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/
这是功能还是错误?会有什么解决办法?我需要相同大小的输入框。
较长的标签会导致输入更长,因为它们都包含在使用display:inline-block
的同一form-group
中,因此它会自动调整大小以适应label
的宽度。
根据引导文档。
"默认情况下,输入、选择和文本区域在 Bootstrap 中是 100% 宽的。 要使用内联表单,您必须在表单上设置宽度 内部使用的控件。
因此,您需要添加一些简单的CSS来控制宽度。
.form-inline .form-group input {
width:140px;
}
演示:http://bootply.com/87747