css - Bootstrap - 水平对齐文本字段

Question

我正在尝试将文本字段与 Bootstrap 对齐，但是我一直未能采用​​我在元素源中找到的任何内容。我想要做的是对齐电子邮件和密码文本字段，但让“记住我”和“登录”居中。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

     <form method="POST" action="/auth/login">

       <div class="form-group">    
         <div>
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" name="email" value="{{ old('email') }}">
         </div>
       </div>

       <div class="form-group">  
         <div>
            <label for="exampleInputPassword1">Password</label>
            <input type="password" name="password" id="password">
         </div>
       </div>

      <div class="form-group">  
        <div class="checkbox">
           <label>
             <input type="checkbox" name="remember"> Remember me
           </label>
        </div>
      </div>

     <div class="form-group">  
       <div>
        <button type="submit" class="btn btn-default">Login</button>
       </div>
     </div>

 </form>

Answer 1

您可以使用 Bootstrap 的 form-horizo​​ntal 类来帮助实现布局。

演示:http://www.bootply.com/nJ2P2gi76B

  <form class="form-horizontal">
    <div class="form-group">
      <label for="inputEmail" class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail">
      </div>
    </div>
    <div class="form-group">
      <label for="inputPassword" class="col-sm-2 control-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label>
            <input type="checkbox"> Remember me
          </label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Log in</button>
      </div>
    </div>
  </form>