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