Css 无法将输入字段与导航栏中的按钮对齐

我决定使用6/6柱网布局和引导，我的导航栏有品牌和登录字段

不幸的是，如果在密码输入上放置帮助块，我似乎无法对齐提交按钮：

代码如下：

<header class="navbar navbar-custom navbar-static-top">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <!-- Brand -->
        <a class="navbar-brand" href="#">Brand</a>
      </div>

      <div class="col-md-6">
        <!-- Login -->
        <form class="navbar-form navbar-input-group">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="E-Mail">
              <input id="password" type="password" class="form-control" placeholder="Password">
              <span class="help-block text-right">Forgot password?</span>
            </div>
            <button type="submit" class="btn btn-primary">Login</button>
        </form>
      </div>
    </div>
  </div>
</header>

只需添加：

vertical-align: top;

按一下按钮

---

示例：

您可以用更好的方式编写HTML，以提供设备之间的灵活性。下面是一个简单的例子

<form class="navbar-form navbar-input-group">
    <div class="row">
       <div class="col-md-4">
          <input class="form-control" placeholder="E-Mail" type="text">
       </div>
       <div class="col-md-4">
          <input id="password" class="form-control" placeholder="Password" type="password">
          <label class="help-block text-right">Forgot password?</label>
        </div>
        <div class="col-md-4">
            <button type="submit" class="btn btn-primary">Login</button>
         </div>
      </div>
</form>

---

BootPly:

不确定这是否是您正在寻找的。虽然这似乎可以解决OP问题，但这是一种不好的做法。如果他想在上方添加一些元素，按钮将再次错位。最好将所有元素都封装在内部。这样，输入字段将始终与按钮对齐。