如何使我的搜索欄下拉吧？

Question

我實現了我的Rails應用程序包含一個搜索欄，但它不會拉適合我的生活。用我用過的方法，有一個form_tag似乎覆蓋頂部的導航欄。

的搜索欄的代碼如下所示：

<%= form_tag search_path, :method => 'get', :class => "form-search", :style => "height:24px;" do %> 
       <div class="input-append" style="padding-top:5px;"> 
        <%= text_field_tag :search, params[:search], :class=>"span3 watermark search-query", :placeholder => "Search By Device or PIN"%> 
        <button class="btn" type="submit"><i class="icon-search"></i></button>  
       </div> 
       <% end %> 

導航欄的樣子：

添加拉權在任何標籤的風格不工作。有沒有人遇到過這個問題？

的引導CSS超越代碼：

#Wrapper { 
margin: 0 auto; 
width: 900px; 
} 

.navbar-fixed-top { 
    padding-bottom:0px !important; 
    height:42px; 
} 

.navbar-inner { 
    background-color: hsl(27, 94%, 39%) !important; 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c05a05", endColorstr="#c05a05"); 
    background-image: -khtml-gradient(linear, left top, left bottom, from(#c05a05), to(#c05a05)); 
    background-image: -moz-linear-gradient(top, #c05a05, #c05a05); 
    background-image: -ms-linear-gradient(top, #c05a05, #c05a05); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c05a05), color-stop(100%, #c05a05)); 
    background-image: -webkit-linear-gradient(top, #c05a05, #c05a05); 
    background-image: -o-linear-gradient(top, #c05a05, #c05a05); 
    background-image: linear-gradient(#c05a05, #c05a05); 
    border-color: #c05a05 #c05a05 hsl(27, 94%, 39%); 
    color: #fff !important; 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.00); 
    -webkit-font-smoothing: antialiased; 
    .border-radius(0) !important; 
    } 

.navbar .brand { 
    display: block; 
    float: left; 
    padding: 10px 20px 10px; 
    margin-left: -20px; 
    font-size: 20px; 
    font-weight: 200; 
    color: white; 
    text-shadow: 0 0px 0 #; 
} 

.navbar .nav > li > a { 
    color: white; 
    float: none; 
    padding: 10px 15px; 
    text-decoration: none; 
    text-shadow: 0 0px 0 #ffffff; 
} 

.navbar .nav > li > a:focus 

.navbar .nav > li > a:hover { 
    color: orange; 
    text-decoration: none; 
    background-color: transparent; 
} 

.container { 
    max-width:900px; 
} 

.row-fluid { 
    max-width:900px; 
} 

.span3 { 
    max-width:210px; 
} 

.well { 
    background-color: hsl(33, 100%, 93%) !important; 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffeedb", endColorstr="#ffeedb"); 
    background-image: -khtml-gradient(linear, left top, left bottom, from(#ffeedb), to(#ffeedb)); 
    background-image: -moz-linear-gradient(top, #ffeedb, #ffeedb); 
    background-image: -ms-linear-gradient(top, #ffeedb, #ffeedb); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffeedb), color-stop(100%, #ffeedb)); 
    background-image: -webkit-linear-gradient(top, #ffeedb, #ffeedb); 
    background-image: -o-linear-gradient(top, #ffeedb, #ffeedb); 
    background-image: linear-gradient(#ffeedb, #ffeedb); 
    border-color: #ffeedb #ffeedb hsl(33, 100%, 93%); 
    color: #333 !important; 
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.00); 
    -webkit-font-smoothing: antialiased; 
} 

.well-thumbnail { 
    background-color: white; 
    border-radius: 5px; 
    padding-top: 5px; 
    padding-left: 5px; 
    padding-right: 5px; 
} 

.row-padded { 
    padding-top: 10px; 
    background-color: #B8B8B8; 
    border: 5px solid #DDD; 
    margin-top: 10px; 
} 

.btn-danger { 

} 

.btn-custom-danger { 
    background-color: hsl(0, 69%, 22%) !important; 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b42121", endColorstr="#5e1111"); 
    background-image: -khtml-gradient(linear, left top, left bottom, from(#b42121), to(#5e1111)); 
    background-image: -moz-linear-gradient(top, #b42121, #5e1111); 
    background-image: -ms-linear-gradient(top, #b42121, #5e1111); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b42121), color-stop(100%, #5e1111)); 
    background-image: -webkit-linear-gradient(top, #b42121, #5e1111); 
    background-image: -o-linear-gradient(top, #b42121, #5e1111); 
    background-image: linear-gradient(#b42121, #5e1111); 
    border-color: #5e1111 #5e1111 hsl(0, 69%, 17%); 
    color: #fff !important; 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33); 
    -webkit-font-smoothing: antialiased; 
} 

.btn-custom-primary { 
    background-color: hsl(193, 32%, 49%) !important; 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b8d3da", endColorstr="#5493a4"); 
    background-image: -khtml-gradient(linear, left top, left bottom, from(#b8d3da), to(#5493a4)); 
    background-image: -moz-linear-gradient(top, #b8d3da, #5493a4); 
    background-image: -ms-linear-gradient(top, #b8d3da, #5493a4); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b8d3da), color-stop(100%, #5493a4)); 
    background-image: -webkit-linear-gradient(top, #b8d3da, #5493a4); 
    background-image: -o-linear-gradient(top, #b8d3da, #5493a4); 
    background-image: linear-gradient(#b8d3da, #5493a4); 
    border-color: #5493a4 #5493a4 hsl(193, 32%, 41.5%); 
    color: #333 !important; 
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.49); 
    -webkit-font-smoothing: antialiased; 
} 

#thumbnail-font{ 
    font-size:small; 
} 

謝謝。使用float:right

Answer 1

嘗試發送.form-search到頭部的右側。

.form-search { 
    float:right; 
}