html - Bootstrap 表单对齐问题

Question

尝试并排对齐两个表单元素以创建每周小时数字段

例如

每周小时数(此处框)-(此处框)

但是当我使用两个带有 - 的 col-md-2 时，我得到的结果是

每周小时数(此处框)(此处框)-

谁有在两个框之间显示 - 的解决方案？我试过使用 3 col-md-1，但对齐完全不正常!

Answer 1

以下代码遵循 Bootstrap 表单构造。使用 .input-group 允许您在具有 .form-control 类的字段之间嵌套 .input-group-addon - 尽管您这样做需要指定宽度(因此 .col-xs-9)。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form>
	<div class="form-group">
		<label class="col-xs-3 control-label" for="HoursPerWeek">Hours Per Week</label>
		<div class="col-xs-9">
			<div class="input-group">
				<input type="text" id="BoxOne" class="form-control">
				<span class="input-group-addon">-</span>
				<input type="text" id="BoxTwo" class="form-control">
			</div>
		</div>
	</div>
</form>