Bootstrap + simple form checkbox grids

Question

I have a list of 20+ tags I want to present in a 4 column checkbox grid but I'm not quite sure what the cleanest way to do it is. I have the following form:

= simple_form_for(@fracture) do |f|
  = f.error_notification    
  .form-inputs
    = f.input :title
    = f.input :summary
    = f.input :tag_list, :as => :check_boxes, :collection => ActsAsTaggableOn::Tag.all.map(&:name), :item_wrapper_class => 'inline'

The resulting form should be something like this http://jsfiddle.net/LVFzK/, but I'd like to have the logic confined in a wrapperor CSS rather than manually modifying the HTML.

Answer 1

If you get rid of the <div class="controls span2"> column elements and add the span2 class to the label elements, the label will have a set width and will float left. This will cause the check boxes to align to a grid.

<label class="checkbox span2">
    <input type="checkbox" value="option1"> Cash
</label>

You can force the grid to be four-columns by adding the span10 class to the container element:

<div class="control-group span10">

However, this will cause the grid to flow left -> right and then create new rows instead of consecutive elements being stacked vertically. The only way I can think to have elements stacked vertically is to use the multi-column layout functionality. I haven't used this before, and I don't actually know how well it works in the various browsers.

This jsFiddle shows the two approaches, each with either a static width or a fluid width.