Question

我决定使用Bootstrap进行6/6列网格布局，我的导航栏确实有品牌和登录字段。

很遗憾，如果我在密码输入上放置help-block，我似乎无法对齐提交按钮：http://www.bootply.com/eJ7QMjincO

以下是代码：

<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>

Answer 1

只需添加：

vertical-align: top;

到按钮。

示例：http://www.bootply.com/WNCOewwnBs

Answer 2

您可以更好地编写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：http://www.bootply.com/kroJXdvceD

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

2 个答案: