7

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、HTML を手動で変更するのではなく、または CSS にロジックを閉じ込めたいと思います。

4

1 に答える 1

4

列要素を取り除き、要素にクラスを<div class="controls span2">追加すると、幅が設定され、左に浮動します。これにより、チェック ボックスがグリッドに整列します。span2labellabel

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

span10クラスをコンテナー要素に追加することで、グリッドを強制的に 4 列にすることができます。

<div class="control-group span10">

ただし、これにより、グリッドが左から右に流れ、連続する要素が垂直に積み重ねられるのではなく、新しい行が作成されます。要素を垂直に積み重ねる唯一の方法は、複数列レイアウト機能を使用することです。私はこれを以前に使用したことがなく、実際にさまざまなブラウザーでどの程度うまく機能するかわかりません。

このjsFiddleは 2 つのアプローチを示しており、それぞれに静的な幅または流動的な幅があります。

于 2012-12-11T06:36:01.937 に答える