3

TwitterBootstrapを使用しています。

私は次のコードを持っています...

<div class="row">
  <div class="span5">
    <%= f.input :is_authorized_to_leave_with_child %>
    <%= f.input :is_emergency_contact %>
  </div>
  <div class="span5">
  </div>
</div>

問題は、ラベルが左側に表示され、チェックボックスが右側に表示されることです。Twitter Bootstrapサンプルフォームのチェックボックスセクションがどのように見えるかとは正反対です。http：//twitter.github.com/bootstrap/base-css.html#formsをチェックしてください。

チェックボックスは右側にあり、ラベルは右側にあります。どうすればそのように表示できますか？

4

1 に答える 1

5

formtastic 2.xの時点で、ファイルを使用して既存の入力の動作を再定義できapp/inputs/#{ input_name.underscore }_input.rbます。

のデフォルトの動作は次のとおりです: 次のレイアウトを作成するをBooleanInput呼び出すto_htmlメソッドを呼び出す:label_with_nested_checkboxlabel_text_with_embedded_checkbox

<label>
  <input />
</label>

そしてこのロジックを使用します：

check_box_html << "" << label_text

したがって、app/inputs/boolean_input.rb次のコードでファイルを作成するだけです。

class BooleanInput < Formtastic::Inputs::BooleanInput
def label_text_with_embedded_checkbox
        label_text << "" << check_box_html
    end
end

そして、app/assets/formtastic-ie7.cssファイルを変更して、その入力をもう少し見栄えよくします。

.formtastic .boolean label input {
    left:-4px;
}

これがどのように見えるかです：

ここに画像の説明を入力

于 2012-08-17T10:55:37.940 に答える