simple_formに対するBootstrapの適用ができない

Question

【わからないこと】
simple_form使用時のbootstrap適用方法
.form-inlineと.form-groupでbootstrapのデフォルトのスタイルが適用されると思っていたが、変わらなかったのは、なぜか。

【考えたこと】
試しにbtnクラスをsubmitボタンに適用したところ、図のように古いレイアウトが残った。→bootstrap自体はsimple_formで使えていると思うが、form全体のデフォルトのレイアウトをbootstrapに置き換えるところで失敗している？

collection_selectメソッドか、hamlの記述方法に問題がありそう。→調べているがわからない
Ransackはbootstrapの適用にはほぼ関係ないはず。

【試したこと】

• simple_form公式資料のbootstrapやcssの説明部分を読む
• collection_selectの説明部分を読む
• .form-inlineと.form-groupを記述→marginが消えるなどしたがレイアウトにほぼ変更なし
• html:{class: 'dropdown-menu'}を記述→レイアウトに変更なし
• サーバー再起動
• haml公式テキストを読む
• Ransack公式テキストを読む

#columnl.d-inline-block.float-left.border-right
  .m-1.container
    = search_form_for @q,url: root_path, html: {class: 'form-inline'} do |f|
      .form-group
        = f.label :name, "商品名を含む" 
        = f.search_field :name_cont
      .form-group
        = f.label :grape_id, 'ブドウの品種'
        = f.collection_select :grape_id_eq, Grape.all, :id, :name, :include_blank => '指定なし', html: {class: 'dropdown-menu'}
      .form-group
        = f.label :area_id, '産地'
        = f.collection_select :area_id_eq, Area.all, :id, :name, :include_blank => '指定なし', html: {class: 'dropdown-menu'}
      .form-group
        = f.label :age_id, '年代'
        = f.collection_select :age_id_eq, Age.all, :id, :age, :include_blank => '指定なし', html: {class: 'dropdown-menu'}
      .btn.btn-primary
        = f.submit

Answer 1

SimpleFormについてわかっていないのですが、回答がついていないので参考までに。
問題の解決方法としてSimpleFormにBootstrapを正しく設定したボタンのCSSと比較するのが一番かと思います。

・SimpleFormとBootstrapの正しく設定したボタン

　http://simple-form-bootstrap.plataformatec.com.br/examples/vertical

・CSSの確認方法

　https://nandemo-nobiru.com/2944/

Comments

[Roots]

そういった方法もあるのですね！ありがとうございます！

HTML/CSS/gemの切り分けをして問題解決をしていなかったこともあり、もう一度自分で考えなおしてみたいと思います！２リンク共に大変参考になりました！<(_ _)>

[no1knows]

「SimpleFormとBootstrapの正しく設定したボタン」のサンプルアプリの全ソースは、下記。
https://github.com/rafaelfranca/simple_form-bootstrap

「SimpleFormとBootstrapの正しく設定したボタン」のページのソースは下記となります。
https://github.com/rafaelfranca/simple_form-bootstrap/blob/master/app/views/examples/horizontals/_form.html.erb

まずは、simple formの書き方として<%=　%>が必要な感じなので、そこから手を付けてみてはいかがでしょうか？