Rails field_with_errors 和 Bootstrap 4 垂直形式

Question

我有一个简单的 rails 5 表格 New/Edit 使用 Bootstrap4 使用垂直对齐。一切看起来都很好，直到出现错误。 .field_with_errors 正在破坏对齐。

引入 field_with_errors 后，.col-x-x 选择器似乎被忽略了。我知道 bootstrap 4 仍处于测试阶段，但希望有人找到解决方法。

表格如下：

.container.wow.fadeInUp{style: "visibility: visible; animation-name: fadeInUp;"}
  %h2.state New State
  .w-75
    = errors_for(@state)
    .card
      = form_for [:admin, @state] do |f|
        .card-block
          .form-group.row
            = f.label :name, class: 'col-sm-4 col-form-label'
            .col-sm-5
              = f.text_field :name, class: 'form-control'
          .form-group.row
            .col-sm-3
              = f.submit "Save", class: 'btn btn-primary'

Answer 1

您可以删除破坏 css

的 field_with_error div

这里有一个简单的技巧可以一劳永逸地消除那些讨厌的包装。只需将此块添加到您的 config/environment.rb 文件即可。

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  html_tag.html_safe
end

Answer 2

很难找到一个好的答案，因为所有旧答案似乎都指的是 .has-error，而 Bootstrap 不再支持这个。

受this blog post启发，@LifterCoder给出的答案的扩展允许忽略label标签，但仍然用.field_with_error标签包裹其他标签。

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  if instance.kind_of?(ActionView::Helpers::Tags::Label)
    html_tag.html_safe
  else
    "<div class=\"field_with_errors\">#{html_tag}</div>".html_safe
  end 

end

Rails field_with_errors 和 Bootstrap 4 垂直形式

Rails field_with_errors and Bootstrap 4 vertical form

haml

ruby-on-rails-5

bootstrap-4