自举表单 - 在输入组发生故障后放置输入

Question

我遇到了一个问题，我认为这可能相当微不足道，但这会耗费我一些时间来解决问题，而且我不确定这是否是已知问题，或者如果我只是无法做到。

我有一个bootstrap 3.3.6形式的.form-horizo​​ntal类。 我想要有几行，每行都包含不同数量的输入。当我使用输入组（即：带有附加日历按钮的输入组）时，会出现问题，在此之后没有其他输入显示在同一行中 - 即到下一行的中断。为了举例说明，我创建了一个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-horizo​​ntal，因为我有几行输入，而不是一行。 任何人都有这样的问题的经验，并知道如何解决它？

Answer 1

从围绕birthdate输入的潜水中脱下input-group类。在这种情况下不需要。如果你坚持使用它，你可以添加类pull-left。