css - 垂直简单形式的错误

Question

我在带有 Bootstrap 的 Ruby on Rails 元素中使用 simple_form gem。在显示带有错误的帮助 block 时的垂直形式中，我有这样的东西:

如何修复 CSS 中的 help-block 类，将错误名称移动到整行的底部，而不增加图标？

这是我的 HAML 的一部分:

    .form-group.input-group
      %span.input-group-addon
        %i.fa.fa-lock
      = f.input :password, label: false, placeholder: 'Type password'

Answer 1

您可以通过修改 simple_form 配置文件中的默认包装器来做到这一点。使用默认(非 Bootstrap )配置执行此操作的方法是修改 config/initializers/simple_form.rb 中的 Inputs 部分默认包装器，来自:

b.use :label_input
b.use :hint,  wrap_with: { tag: :span, class: :hint }
b.use :error, wrap_with: { tag: :span, class: :error }

到:

b.use :label
b.use :hint,  wrap_with: { tag: :span, class: :hint }
b.use :error, wrap_with: { tag: :span, class: :error }
b.use :input

您可以将相同的技术应用于配置的 Bootstrap 版本。

这将使单个复选框在出现错误时看起来有点奇怪，因此您还需要制作一个与原始配置相同的包装器版本，并将其设置为仅用于 bool 值 输入类型。例如(同样来自默认配置，而不是 Bootstrap 配置):

config.wrappers :checks, class: :input,
    hint_class: :field_with_hint, error_class: :field_with_errors do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly

    ## Inputs
    b.use :label_input
    b.use :hint,  wrap_with: { tag: :span, class: :hint }
    b.use :error, wrap_with: { tag: :span, class: :error }
end
config.wrapper_mappings = { boolean: :checks }