使用simple_form默认生成的bootstrap wrapper,使用f.input :remember_me, :as => boolean生成的html如下:
<div class="control-group boolean optional">
<label class="boolean optional control-label" for="user_remember_me">记住我</label>
<div class="controls">
<input name="user[remember_me]" type="hidden" value="0">
<label class="checkbox">
<input class="boolean optional" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
</label>
</div>
</div>
由于 隐藏域 在 label class=checkbox 之外,因为隐藏域的css定义,所以 checkbox会比label看起来高。所以需要把隐藏域放到 label class=checkbox 内,这样看上去就高度一致了。
修改config/initializers/simple_for.rb,增加以下内容:
# 指定boolean_style为inline,避免生成checkbox外面再套一个label
config.wrappers :checkbox, :tag => 'div', :class => 'control-group', :error_class => 'error', :boolean_style => :inline do |b|
b.use :label
b.wrapper :tag => 'div', :class => 'controls' do |input|
# 这里自己手工生成一个label,input会生成checkbox和hidden
input.wrapper :tag => 'label', :class => 'checkbox' do |checkbox|
checkbox.use :input
end
end
end
修改模板文件,指定wrapper
<%= f.remember_me, :as => :boolean, :wrapper => :checkbox %>
最后生成的html:
<div class="control-group boolean optional">
<label class="boolean optional control-label" for="user_remember_me">记住我</label>
<div class="controls">
<label class="checkbox">
<input name="user[remember_me]" type="hidden" value="0">
<input class="boolean optional" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
</label>
</div>
</div>
浏览器中查看结果正常了