Bootstrap复选框未在表单中对齐

Question

Check out this . The checkbox in this sign in form is awkwardly misplaced. Here is my views/devise/new.html.erb :

<div class="panel panel-default">
  <div class="panel-heading">
    <div class="panel-title">
      <h1>Sign in</h1>
    </div>
  </div>
  <div class="panel-body">
    <%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>

        <div class="form-group">
          <%= f.label :email %>
          <%= f.email_field :email, class: "form-control", :autofocus => true %>
        </div>

        <div class="form-group">
          <%= f.label :password %>
          <%= f.password_field :password, class: "form-control" %>
        </div>

        <div class="form-group">
          <div class="checkbox">
            <%= f.check_box :remember_me %>
            <%= f.label :remember_me %>
          </div>
        </div>

        <div class="form-group">
          <%= f.submit "Sign in", class: "btn btn-primary" %>
        </div>
    <% end %>
  </div>
  <div class="panel-footer">
    <%= render "devise/shared/links" %>
  </div>
</div>

The html form's code is(as by inspect element on that link):

<form accept-charset="UTF-8" action="/users/sign_in" class="new_user" id="new_user" method="post"><div style="display:none"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="hJoDW6L9ixCxHihStggbY4U4iPcoyD6QRSVg2+rcCbA="></div>

        <div class="form-group">
          <label for="user_email">Email</label>
          <input autofocus="autofocus" class="form-control" id="user_email" name="user[email]" type="email" value="">
        </div>

        <div class="form-group">
          <label for="user_password">Password</label>
          <input class="form-control" id="user_password" name="user[password]" type="password">
        </div>

        <div class="form-group">
          <div class="checkbox">
            <input name="user[remember_me]" type="hidden" value="0"><input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
            <label for="user_remember_me">Remember me</label>
          </div>
        </div>

        <div class="form-group">
          <input class="btn btn-primary" name="commit" type="submit" value="Sign in">
        </div>
</form>

I am facing similar issues with aligning checkboxes in other projects as well(Sorry! I am a newbie to bootstrap). Any help is much required!

Answer 1

Strucutre of bootstrap checkboxes should look like bellow:

 <div class="checkbox">
     <label>
        <input type="checkbox" ... > Label text
     </label>
 </div>

EDIT: OR you can keep your structure and than you can do something like this:

 /* add this to your CSS */

 .radio input[type="radio"], 
 .radio-inline input[type="radio"],
 .checkbox input[type="checkbox"],
 .checkbox-inline input[type="checkbox"] {
      margin-left: 0;
  }