Question

我使用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'

Answer 1

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

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

[attr1][attr2]

Answer 2

很难找到一个好的答案，因为所有旧答案似乎都引用了 .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

Rails field_with_errors和Bootstrap 4垂直形式

2 个答案: