我正在使用 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
复选框在右边,标签在右边。我怎样才能这样显示它?
最佳答案
从 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;
}
这是它的样子:
关于ruby-on-rails - Rails 和 Formtastic : how to display the label of the checkbox to the right?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11891550/