2014-10-19 63 views
1

检出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="https://stackoverflow.com/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的新手)。任何帮助是非常需要的!

+0

Bootlint代码时间,它会抓住这个; https://github.com/twbs/bootlint/wiki/E017 – cvrebert 2014-10-19 08:50:42

回答

4

引导复选框Strucutre应该像波纹管:

<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; 
    } 
+0

我从引导文档直接知道这一点,但需要一个erb代码。无论如何感谢您的帮助! – rahulserver 2014-10-19 08:12:34

+0

你可以在你的css中轻松修复它 - 检查我的编辑 – 2014-10-19 08:20:44

+2

实际上,在这种情况下,你不应该使用'form-control',它只能用于文本输入。 – cvrebert 2014-10-19 08:52:48