2014-03-26 46 views
1

我正在使用https://github.com/bootstrap-ruby/rails-bootstrap-forms宝石。我在我的html输出中获得双标签,并且输入字段的宽度为100%。我如何解决它? 这是我的色器件new.html.erb:Rails 4形成bootstrap修复?

<h2>Sign up</h2> 

<%= bootstrap_form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %> 

<%= devise_error_messages! %> 

    <div><%= f.label :email %><br /> 
    <%= f.email_field :email, :autofocus => true %></div> 

    <div><%= f.label :password %><br /> 
    <%= f.password_field :password %></div> 

    <div><%= f.label :password_confirmation %><br /> 
    <%= f.password_field :password_confirmation %></div> 

    <div><%= f.submit "Sign up" %></div> 
<% end %> 

<%= render "devise/shared/links" %> 

这是我的HTML输出:

<div><label for="user_email">Email</label><br /> 
    <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> 

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

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

    <div><input class="btn btn-default" name="commit" type="submit" value="Sign up" /></div> 
</form> 

回答

3

你得到重复的领域,因为email_fieldpassword_field,等助手已经把标签在那里为你。所以你真的只需要这个:

<%= f.email_field :email, :autofocus => true %> 
<%= f.password_field :password %> 
etc... 

你的字段是100%的宽度,因为这是Bootstrap 3的默认设置。具体见Bootstrap Documentation for Forms,其中说:

All textual <input>, <textarea>, and <select> elements with 
.form-control are set to width: 100%; by default.