Question

我正在尝试为Twitter Bootstrap的文档中描述的一个复选框获取两个标签。（请参阅http://twitter.github.com/bootstrap/base-css.html#forms - ＆gt;水平表单 - ＆gt;复选框（在文本输入下方））

所以我想要显示的是左边描述的标签，复选框本身以及右边的提示。

simple_form gem中twitter bootstrap的标准实现创建了一个<p>标签，用于显示提示，因为它试图对所有类型的输入保持一致。

我现在想在simple_form初始化程序中为“bootstrap checkboxes”创建一个自定义包装器，但我无法弄清楚如何解决这个问题。

这是我目前使用裸轨（erb）实现它的方式：

<div class="control-group">
 <%= f.label :recurring, :class => 'control-label' %>
 <div class="controls">
   <%= f.label :recurring, :class => 'checkbox' do %>
    <%= f.check_box :recurring %>
    <%= t('.recurring_hint') %>
   <% end %>
 </div>
</div>

您能帮助我或者至少尝试解释这些自定义包装器的工作原理吗？谢谢！

编辑：让我更准确地问我的问题：我可以使用simple_form的包装器API将标签用作包装器吗？

Answer 1

解决方案：

更新到最新版本的simple_form（2.0.2，有2.0）
覆盖BooleanInput：

应用/输入/ boolean_input.rb

class BooleanInput < SimpleForm::Inputs::BooleanInput def input if nested_boolean_style? template.label_tag(nil, :class => "checkbox") { build_check_box + inline_label } else build_check_box end end end

<强> _form.html.erb

在模板中调用：

<%= f.input :recurring, :inline_label => t('.recurring_hint') %>

Answer 2

使用latest simple_form，该选项可立即使用。

Answer 3

您可以使用bootstrap suport安装simple_form，因此您不需要像控件组那样编写包装器。

安装时检查此链接： https://github.com/plataformatec/simple_form#twitter-bootstrap

您需要做的只是运行命令：

rails generate simple_form:install --bootstrap

在此页面中，您可以看到一些示例，包括带有bootstrap和simple_form的水平复选框：http://simple-form-bootstrap.plataformatec.com.br/articles/new

如果您真的想按照自己的方式使用它，则需要在标签上添加“内联”类和“复选框”。

如何在simple_form中使twitter bootstrap兼容复选框标签？

3 个答案: