ブートストラップ+シンプルなフォームのチェックボックスグリッド

Question

私は4列のチェックボックスグリッドに表示したい20個以上のタグのリストを持っていますが、それを行う最もクリーンな方法は何か分かりません。

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

たフォームは、このhttp://jsfiddle.net/LVFzK/のようなものでなければなりませんが、私はロジックがwrapperやCSSに閉じ込められたのではなく、手動でHTMLを変更したいのですが：私は次の形式を持っています。

Answer 1

あなたは<div class="controls span2">列要素を取り除くとlabel要素にspan2クラスを追加する場合は、labelは、設定された幅を持つことになりますし、左フロートます。これにより、チェックボックスがグリッドに揃うようになります。

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

あなたは、コンテナ要素にspan10クラスを追加することにより、4-列であることを、グリッドを強制することができます

<div class="control-group span10"> 

をしかし、これはグリッドが左に流れるようになります - >右と連続した要素の代わりに新しい行を作成して垂直に積み重ねます。要素を垂直に積み重ねると思う唯一の方法は、multi-column layout functionalityを使用することです。私は以前これを使用していませんでしたが、実際にはさまざまなブラウザでどれくらいうまく動作しているかは実際には分かりません。

このjsFiddleは、それぞれ静的な幅または流体の幅の2つのアプローチを示しています。