javascript - Bootstrap 表单 - 在输入组失败后放置输入

Question

我有一个我认为可能非常微不足道的问题，但它让我花了一些时间来解决，而且我不确定这是一个已知问题，还是我无法解决。

我有一个带有 .form-horizo​​ntal 类的 bootstrap 3.3.6 表单。 我想要几行，每行包含不同数量的输入。当我使用输入组(即:带有插件日历按钮的输入组)时出现问题，此后同一行中不再显示其他输入 - 中断到下一行。

为了举例说明，我创建了一个 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 类。