ブートストラップ検索のルックアンドフィール

Question

私はそれに検索ボックスを備えた素敵なブートストラップナビゲーションメニューを持っています。私は部分的なファイルでそれを持っている

...

 <form class="navbar-form navbar-left"> 
    <div class="form-group"> 
     <input type="text" class="form-control" placeholder="Search"> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
    </form> 

私はこの検索ボックスのレイアウトが好きです。残念ながら、私は...同じように見えるために私のレールの検索ボックスを取得する方法を、私は私のレールに確認する必要がありますどのような変更

<%= search_form_for @search do |f| %> 
<div class="field"> 
    <%= f.label :title_or_template_cont, "Search" %> 
    <%= f.text_field :title_or_template_cont %> 


</div> 
<div class="actions"> 
<%= f.submit "Search" %> 

を把握することはできませんように見えるように形成ブートストラップ検索ボックス？

レールの検索ボックス内でいくつかのクラスを試しましたが、見た目に近いものではありませんでした。

提案がありますか？

Answer 1

<form class="navbar-form navbar-left"> 
    <div class="form-group"> 
     <input type="text" class="form-control" placeholder="Search"> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
    </form> 

宝石「Simpleform」をチェックすると、ヘルパーを使って簡単にCSSでフォームをスタイルすることができます。次に：

<%= simple_form_for @search, html: {class: "navbar-form navbar-left"} do |f| %> 
    <div class="form-group"> 
    <%= f.input_tag :title_or_template_cont, label: false, input_html: {class: 'form-control'}, placeholder: 'search' %> 
    </div> 
<div class="actions"> 
<%= f.submit "Search", class: "btn btn-default" %>