加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

twitter-bootstrap – Simple_form:如何更改输入的包装器类?(

发布时间:2020-12-18 00:26:41 所属栏目:安全 来源:网络整理
导读:使用simple_form和Bootstrap时我有一个问题.关于输入的包装标签.显示以下代码: 查看代码(含哈尔) = simple_form_for @refer_email_form,url: create_refer_message_path,html: { class: "form-horizontal" } do |f| = f.input :to,label_html: { class: "co
使用simple_form和Bootstrap时我有一个问题.关于输入的包装标签.显示以下代码:

查看代码(含哈尔)

= 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标签来实现这一点:’div’,class:“col-sm-6”do | ba |到config / simple_form_bootstrap.rb文件,但真正的问题是我可以使用不同的类的div,也许col-sm-9在其他形式.而且我在视图中尝试了input_html,wrapper_html,但是第一个< div class =“form-group”>和input_html上的wrapper_html效果仅影响< input>元件

有没有办法更改< input>的包装< div>动态地在视图中?

解决方法

更改
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>

笔记

>我必须明确指定“引导”包装器使其工作.以下设置似乎没有起作用config.default_wrapper =:bootstrap当我按照你的说法命名包装引导时,它不起作用.当我使用不同的名称(如bootstrap_x)时,该设置将起作用.这可能是我当地的问题,所以这只是为了你的信息,以防遇到同样的问题.>如果您好奇上述所有内容,请查看simple_form README文件,它位于“包装API”部分.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读