Bootstrap + kratki checkbox w formie prostej formy

Question

Mam listę ponad 20 znaczników, które chcę przedstawić w siatce z polami o 4 kolumnach, ale nie jestem do końca pewien, czy jest to najczystszy sposób. Mam następującą postać:

= 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' 

Powstała forma powinna być mniej więcej tak http://jsfiddle.net/LVFzK/, ale chciałbym mieć logikę zamknięta w wrapper lub CSS zamiast ręcznego modyfikowania kodu HTML.

Answer 1

Jeśli pozbyć elementów kolumn <div class="controls span2"> i dodać klasę span2 do label elementów, label będzie miał ustawić szerokość i będzie unosić się w lewo. Spowoduje to wyrównanie pól wyboru do siatki.

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

Można wymusić siatkę być czterech kolumn, dodając klasę span10 do elementu pojemnika:

<div class="control-group span10"> 

Jednak, spowoduje to siatkę płynąć w lewo -> prawo i następnie utwórz nowe rzędy zamiast kolejnych elementów układanych pionowo. Jedyny sposób, w jaki mogę pomyśleć o pionowym ułożeniu elementów, to użycie multi-column layout functionality. Nie używałem tego wcześniej i nie wiem, jak dobrze działa w różnych przeglądarkach.

Ten numer jsFiddle przedstawia dwa podejścia, każdy o szerokości statycznej lub szerokości płynu.