垂直简单形式的错误答案

【问题标题】：Errors in vertical simple form垂直简单形式的错误
【发布时间】：2015-01-06 00:24:53
【问题描述】：

我在我的 Ruby on Rails 项目中使用 simple_form gem 和 bootstrap。在显示错误帮助块时以垂直形式显示我有这样的东西：

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

这是我的 HAML 的一部分：

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

【问题讨论】：

标签： css ruby-on-rails twitter-bootstrap haml simple-form

【解决方案1】：

您可以通过修改您的 simple_form 配置文件中的默认包装来做到这一点。使用默认（非引导）配置执行此操作的方法是修改 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

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

这会使单个复选框在出现错误时看起来有点奇怪，因此您还需要制作一个与原始配置重复的包装器版本，并将其设置为仅与 boolean 输入一起使用类型。例如（同样来自默认配置，而不是引导配置）：

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 }

【讨论】：