Bootstrap简单表单自定义包装程序,输入字段与前置

时间:2019-03-15 17:31:54

标签: twitter-bootstrap bootstrap-4 simple-form simple-form-for

输入组未正确显示前缀。出现前置,但随后字段下降到下一行。我该如何仅使用Bootstrap来解决此问题,我不希望不修改CSS,而只能通过它来打开它。

显示为:

enter image description here

Config / Initializer / simple_form_bootstrap.rb

  # horizontal range input group
  config.wrappers :bs_horizontal_range, tag: 'div', class: 'form-group row', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :readonly
    b.optional :step
    b.use :label, class: 'col-sm-4 form-control-label'
    b.wrapper :input_group_tag, tag: 'div', class: 'input-group' do |ba|
      ba.optional :prepend
      ba.use :input, class: 'form-control-range', error_class: 'is-invalid', valid_class: 'is-valid'
      ba.optional :append
    end
    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
  end

简单表单视图

        <%= f.input :revenue, prepend: "$", :wrapper => :bs_horizontal_range %>    

0 个答案:

没有答案