如何使用simple_form中的twitter bootstrap兼容复选框标签？

Question

I'm trying to get two labels for one check box as described in Twitter Bootstrap's documentation. (see http://twitter.github.com/bootstrap/base-css.html#forms --> horizontal forms --> checkbox (below text input))

So what I want to display is a label for the description on the left, the check box itself and a hint right next to it on the right.

The standard implementation of twitter bootstrap in simple_form gem creates a <p> tag for displaying the hint since it tries to be consistent for all kinds of inputs.

I now want to create a custom wrapper for "bootstrap checkboxes" in the simple_form initializer but I just cannot figure out how to solve this.

This is how I currently implemented it using bare rails (erb):

<div class="control-group">
 <%= f.label :recurring, :class => 'control-label' %>
 <div class="controls">
   <%= f.label :recurring, :class => 'checkbox' do %>
    <%= f.check_box :recurring %>
    <%= t('.recurring_hint') %>
   <% end %>
 </div>
</div>

Can you help me or at least try to explain how these custom wrapper thing works? Thank you!

Edit: Let me ask my question more precisely: Can I use simple_form's wrappers API to use a label as a wrapper?

Answer 1

Solution:

1. Update to newest version of simple_form (2.0.2, had 2.0)
2. Override BooleanInput:

app/inputs/boolean_input.rb

class BooleanInput < SimpleForm::Inputs::BooleanInput
  def input
    if nested_boolean_style?
        template.label_tag(nil, :class => "checkbox") {
          build_check_box + inline_label
        }
    else
      build_check_box
    end
  end
end

_form.html.erb

Call in template:

<%= f.input :recurring, :inline_label => t('.recurring_hint') %>  

Answer 2

使用最新的simple_form ，该选项可立即使用。

Answer 3

You can install simple_form with bootstrap suport, so you don't need to write the wrappers like control-groups, etc.

Check this link on installation: https://github.com/plataformatec/simple_form#twitter-bootstrap

What you need to do is just run the command:

rails generate simple_form:install --bootstrap

In this page you can see some examples, including horizontal checkboxes with bootstrap and simple_form: http://simple-form-bootstrap.plataformatec.com.br/articles/new

If you really want to use it the way you are doing, you need to add the class "inline" along with the "checkbox" on the label.