添加一個搜索欄進入主菜單上的引導

Question

我使用Twitter的引導製作一個網站，一切都幾乎確定，但我想不出如何將搜索欄位置進入主菜單

這裏是網站在線 http://testings.coffeecup.com/index1.html

每次我把它放在容器上的任何地方，它都會擰緊。

編輯：

我設法添加：

http://gyazo.com/e76b7cfa8e25b9ef2913d588b28ea894

但我仍然無法定位它在右邊。

我使用

 .navbar-search { 
    position: relative; 
} 

.navbar-search .search-query { 
    float:right; 
} 

.navbar-search .icon-search { 
    position: absolute; 
    top: 7px; 
    background-image: url(""); 
} 

Answer 1

權導航欄。

Answer 2

的CSS，你必須添加里面<div class="navbar-inner">和<div class="nav-collapse collapse">後的搜索欄。

的搜索欄的代碼：以後<div class="navbar-inner">包括與兩者的屬性，你需要..後只是將其浮動的權利和調整頁邊距，以便其在垂直方向爲中心的搜索欄<input>

<input id="search" class="span3" type="search" name="search" placeholder="Search"> 

Answer 3

可以使用右拉式類

我用它在容器

<div class="navbar-inner"> 
       <div class="container"> 
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        </a> 
        <a class="brand" href="#">Title</a> 
        <div class="nav-collapse collapse navbar-responsive-collapse"> 
        <ul class="nav"> 
         <li class="active"><a href="#">Home</a></li> 
         <li><a href="#">Link</a></li> 
         <li><a href="#">Link</a></li> 
         <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Action</a></li> 
          <li><a href="#">Another action</a></li> 
          <li><a href="#">Something else here</a></li> 
          <li class="divider"></li> 
          <li class="nav-header">Nav header</li> 
          <li><a href="#">Separated link</a></li> 
          <li><a href="#">One more separated link</a></li> 
         </ul> 
         </li> 
        </ul> 
        <form class="navbar-search pull-right" action=""> 
         <input type="text" class="search-query span2" placeholder="Search"> 
        </form> 
        <ul class="nav pull-right"> 
         <li><a href="#">Link</a></li> 
         <li class="divider-vertical"></li> 
         <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Action</a></li> 
          <li><a href="#">Another action</a></li> 
          <li><a href="#">Something else here</a></li> 
          <li class="divider"></li> 
          <li><a href="#">Separated link</a></li> 
         </ul> 
         </li> 
        </ul> 
        </div><!-- /.nav-collapse --> 
       </div> 
       </div> 

結果：