Griglie di caselle di avvio + modulo semplice

Question

Ho una lista di 20+ tag che voglio presentare in una griglia a 4 colonne, ma non sono abbastanza sicuro di quale sia il modo più pulito per farlo. Ho il seguente modulo:

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

La forma risultante dovrebbe essere qualcosa di simile http://jsfiddle.net/LVFzK/, ma mi piacerebbe avere la logica confinata in un CSS wrapper o piuttosto che modificare manualmente il codice HTML.

Answer 1

Se sbarazzarsi degli elementi della colonna <div class="controls span2"> e aggiungere la classe span2 agli label elementi, il label avrà una larghezza set e galleggia a sinistra. Ciò farà sì che le caselle di controllo si allineino a una griglia.

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

È possibile forzare la griglia di essere quattro colonne con l'aggiunta della classe span10 all'elemento del contenitore:

<div class="control-group span10"> 

Tuttavia, questo farà sì che la griglia di fluire sinistra -> destra e quindi crea nuove righe anziché elementi consecutivi impilati verticalmente. L'unico modo in cui posso pensare di disporre di elementi impilati verticalmente è utilizzare lo multi-column layout functionality. Non l'ho usato prima, e in realtà non so quanto bene funzioni nei vari browser.

Questo jsFiddle mostra i due approcci, ciascuno con una larghezza statica o una larghezza del fluido.