如何使我的搜索栏拉右？

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

导航栏看起来像：

在任何标签中添加pull-right作为样式都不起作用。以前有没有人遇到过这个问题？

Bootstrap 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;
}

谢谢。

Answer 1

尝试使用float:right将.form-search发送到标题的右侧。

.form-search {
    float:right;
}