Rails field_with_errorsとBootstrap 4 vertical form

Question

私は、Bootstrap4を使用して垂直アラインメントを使ってNew/Edit用の単純なレール5のフォームを用意しています。エラーが出るまでは、すべてが正常に見えます。 .field_with_errorsがアラインメントを破っています。

field_with_errorsが導入されると.col-x-xセレクタが無視されるようです。私はブートストラップ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