html - Bootstrap 复选框未在表单中对齐

Question

查看 this . 此登录表单中的复选框笨拙地放错了位置。 这是我的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>

html 表单的代码是(通过检查该链接上的元素):

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

我在其他元素中也面临着对齐复选框的类似问题(抱歉!我是 bootstrap 的新手)。非常需要任何帮助!

Answer 1

bootstrap 复选框的结构应如下所示:

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

编辑: 或者你可以保留你的结构，然后你可以做这样的事情:

 /* 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;
  }