自举表单 - 在输入组发生故障后放置输入
问题描述:
我遇到了一个问题,我认为这可能相当微不足道,但这会耗费我一些时间来解决问题,而且我不确定这是否是已知问题,或者如果我只是无法做到。自举表单 - 在输入组发生故障后放置输入
我有一个bootstrap 3.3.6形式的.form-horizontal类。 我想要有几行,每行都包含不同数量的输入。当我使用输入组(即:带有附加日历按钮的输入组)时,会出现问题,在此之后没有其他输入显示在同一行中 - 即到下一行的中断。为了举例说明,我创建了一个JSFiddle,演示了输入组的最后一行(Form2 - 在这种情况下,它显然看起来很好),并且同一行反转输入的顺序( Form1),以便输入组现在处于中间位置,并且渲染的结果将打破该行,使得该输入组之后的所有内容都显示在下面的行中。
- 代码:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<form class="form-horizontal">
<h3>Form1</h3>
<div class="form-group">
<label for="input-name" class="col-sm-1 control-label">Name</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="input-name">
</div>
<label for="birthdate" class="col-sm-1 control-label">Birth</label>
<div class="input-group col-sm-1">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" id="birthdate">
</div>
<label for="age" class="col-sm-1 control-label">Age</label>
<div class="col-sm-1">
<input type="text" class="form-control" id="age">
</div>
</div>
</form>
<form class="form-horizontal">
<h3>Form2</h3>
<div class="form-group">
<label for="input-name" class="col-sm-1 control-label">Name</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="input-name">
</div>
<label for="age" class="col-sm-1 control-label">Age</label>
<div class="col-sm-1">
<input type="text" class="form-control" id="age">
</div>
<label for="birthdate" class="col-sm-1 control-label">Birth</label>
<div class="input-group col-sm-1">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" id="birthdate">
</div>
</div>
</form>
- 截图:
我看过很多类似解决方案的例子,当表单有.form-inline时,这不是我所需要的。我需要它是.form-horizontal,因为我有几行输入,而不是一行。 任何人都有这样的问题的经验,并知道如何解决它?
答
从围绕birthdate
输入的潜水中脱下input-group
类。在这种情况下不需要。如果你坚持使用它,你可以添加类pull-left
。
是的,钉了它。在我的情况下,只是添加左拉,它的工作。这不是100%清楚为什么它是这样的行为,但至少它解决了我的问题,非常感谢! –
'input-group'与任何'col-'类设置'float:none'这就是为什么它强制下一个div包装的原因。 –