부트 스트랩 검색 레일 모양과 느낌

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" %>