twitter-bootstrap - Simple_form : how to change input's wrapper's class?(不是wrapper_html上的效果)

Question

我在使用 simple_form 和 Bootstrap 3 时遇到问题。关于输入的包装标签。显示以下代码:

查看代码 (含火腿)

= simple_form_for @refer_email_form, url: create_refer_message_path, html: { class: "form-horizontal" } do |f|
  = f.input :to, label_html: { class: "col-sm-2" }
  = f.input :subject, label_html: { class: "col-sm-2" }

配置/simple_form_bootstrap.rb

SimpleForm.setup do |config|
  config.input_class = "form-control"

  config.wrappers :bootstrap, tag: 'div', class: 'form-group', error_class: 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label, class: "control-label"
    # b.wrapper tag: 'div', class: "col-sm-6" do |ba|
    b.wrapper tag: 'div' do |ba|
      ba.use :input
      ba.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
    end
  end

 config.default_wrapper = :bootstrap

我只想默认使用“水平形式”

生成的html

...
\<div class="form-group string optional refer_email_form_to">
  <label class="string optional control-label col-sm-2" for="refer_email_form_to">To</label>
  <div>
    <input class="string optional form-control" id="refer_email_form_to"   name="refer_email_form[to]" type="text">
  </div>
</div>
...

我想要的是更改 <div>的类，它只包装了 <input>元素，像这样:

...
<div class="col-sm-6">
  <input class="string optional form-control" id="refer_email_form_to"   name="refer_email_form[to]" type="text">
<div>
...

我已经从 simple_form 的 github 页面阅读了 README，并搜索了这个问题，我知道我可以通过添加 b.wrapper tag: 'div', class: "col-sm-6" do |ba| 来实现这一点到 配置/simple_form_bootstrap.rb 文件，但真正的问题是我可能对 div 使用不同的类，也许 col-sm-9以其他形式。我尝试了 input_html , wrapper_html在 View 中，但 wrapper_html对第一个 <div class="form-group"> 的影响, 和 input_html仅影响 <input>元素

有什么办法可以改变 <input>的包装 <div>在 View 中动态？

Answer 1

改变

b.wrapper tag: 'div' do |ba|

至

b.wrapper :my_wrapper, tag: 'div' do |ba|

设置输入字段如下

= f.input :to, label_html: { class: "col-sm-2" }, wrapper: :bootstrap, my_wrapper_html: { class: "css-class-name-goes-here" }

生成的 HTML 是

<div class="form-group string optional refer_email_form_to">
  <label class="string optional control-label col-sm-2" for="refer_email_form_to">To</label>
  <div class="css-class-name-goes-here">
    <input class="string optional form-control" id="refer_email_form_to"   name="refer_email_form[to]" type="text">
  </div>
</div>

备注

我必须明确指定“Bootstrap ”包装器才能使其工作。以下设置似乎没有生效config.default_wrapper = :bootstrap

当我将包装器命名为 bootstrap 时它不起作用像你一样做。当我使用不同的名称时，该设置有效，例如 bootstrap_x .这可能是我的本地问题，因此仅供您引用，以防您遇到同样的问题。

如果您对以上所有内容的来源感到好奇，请查看 simple_form README 文件，它位于“包装器 API”部分。