使用bootstrap和simple_form生成checkbox跟label对齐的问题

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

 

浏览器中查看结果正常了