Rails和Formtastic：如何在右側顯示復選框的標簽？

Question

我正在使用Twitter Bootstrap。

我有以下代碼......

<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

復選框位於右側，標簽位於右側。 我怎么能這樣顯示呢？

Answer 1

從formtastic 2.x開始 ，您可以使用app/inputs/#{ input_name.underscore }_input.rb文件重新定義現有輸入的行為。

的默認行為BooleanInput是：調用to_html方法，它調用label_with_nested_checkbox ，它調用label_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;
}

這是它的樣子：