3

我正在使用 Twitter 引导程序。

我有以下代码...

<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.xapp/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;
}

这是它的样子:

在此处输入图像描述

于 2012-08-17T10:55:37.940 回答