내 검색 창을 오른쪽으로 당기는 방법은 무엇입니까?

Question

레일스 앱에 검색 창을 구현했지만 나에게 적합하지 않습니다. 필자가 사용했던 방법으로, 최상위 navbar를 덮는 것처럼 보이는 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; 
}