Bootstrap + einfache Formular Checkbox Gitter

Question

Ich habe eine Liste von 20+ Tags, die ich in einem 4-Spalten Checkbox-Gitter präsentieren möchte, aber ich bin mir nicht ganz sicher, was der sauberste Weg ist, es zu tun. Ich habe die folgende 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' 

Die resultierende Form so etwas wie diese http://jsfiddle.net/LVFzK/ sein soll, aber ich mag die Logik in einem wrapper oder CSS beschränkt haben, anstatt manuell die HTML ändern.

Answer 1

Wenn Sie loswerden der <div class="controls span2"> Säulenelemente erhalten und die span2 Klasse zu den label Elemente hinzufügen, wird der label eine Reihe Breite haben und float links. Dadurch werden die Kontrollkästchen an einem Raster ausgerichtet.

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

Sie das Raster zwingen können durch Hinzufügen der span10 Klasse des Containerelement vier Säulen zu sein:

<div class="control-group span10"> 

jedoch, wird dies das Gitter dazu führen, Vorlauf links -> rechts und Erstellen Sie dann neue Zeilen, anstatt aufeinanderfolgende Elemente vertikal zu stapeln. Die einzige Möglichkeit, um Elemente vertikal gestapelt zu haben, ist die multi-column layout functionality. Ich habe das vorher nicht benutzt, und ich weiß nicht wirklich, wie gut es in den verschiedenen Browsern funktioniert.

Diese jsFiddle zeigt die beiden Ansätze mit jeweils entweder einer statischen Breite oder einer Fluidbreite.