Rails field_with_errors和Bootstrap 4垂直形式

时间:2017-05-17 18:27:05

标签: haml ruby-on-rails-5 bootstrap-4

我使用Bootstrap4使用垂直对齐为New / Edit设置了一个简单的rails 5表单。一切都很好,直到我收到错误。 .field_with_errors打破了对齐。

一旦引入了field_with_errors,似乎忽略了.col-x-x选择器。我知道bootstrap 4仍处于alpha状态,但希望有人找到了解决方法。

以下是表格:

.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'

2 个答案:

答案 0 :(得分:1)

你可以删除破坏你的css的field_with_error div

这是一个简单的伎俩,一劳永逸地废除那些讨厌的包装纸。只需将此块添加到config / environment.rb文件中即可。

[attr1][attr2]

答案 1 :(得分:0)

很难找到一个好的答案,因为所有旧答案似乎都引用了 .has-error,而 Bootstrap 不再支持这一点。

@LifterCoder 给出的答案的扩展,受 this blog post 的启发,允许忽略 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