將搜索表單添加到頂部導航欄引導程序

我試圖將搜索表單添加到下面顯示的頂部導航欄代碼中，以便它在出現在註銷鏈接之前時有一個小空間並對齊到右側，但它總是顯示爲在註銷鏈接之後，或者它會擴展導航欄，看起來很糟糕。將搜索表單添加到頂部導航欄引導程序

那麼有人可以幫助我告訴我我在這裏失蹤了什麼？謝謝你的時間。

頭部分：

<head> 
<link rel="stylesheet" href="css/bootstrap.css"> 
<script type="text/javascript" src="js/jquery-2.0.3.js"></script> 
<script type="text/javascript" src="js/bootstrap.js"></script> 
<title>Test</title> 
</head>

主體部分：

<nav class="navbar navbar-inverse" role="navigation"> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">Company</a> 
    </div> 

    <div class="collapse navbar-collapse"> 
    <ul class="nav navbar-nav">  
     <li><a href="#" class="current">Home</a></li>    
     <li class="active dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Employees <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">New Employee</a></li> 
       <li class="divider"></li> 
       <li class="nav-header">Reports</li> 
       <li><a href="#" target="_blank">Employees List</a></li> 
      </ul> 
     </li>     
    </ul> 

    <ul class="nav navbar-nav navbar-right">  

    <form class="navbar-form" role="search"> 
     <div class="input-group"> 
      <input type="text" class="input-small" placeholder="Search" name="srch-term" id="srch-term"> 
      <div class="input-group-btn"> 
       <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
      </div> 
     </div> 
    </form> 

     <li><a href="#">Logout</a></li>  
    </ul> 
    </div> 
</nav>

來源

2014-01-08 MChan

你的html似乎無效......一些未封閉的div。 –

這代碼真的是一個巨大的頁面，所以我只是添加了與導航欄相關的代碼，因爲其餘部分完全不相關 – MChan

你不能把一個<form>的<ul>而不是包裹在<li>裏面所以這裏是什麼似乎工作：

jsFiddle

<nav class="navbar navbar-inverse" role="navigation"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Company</a> 
    </div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li> 
       <a href="#" class="current">Home</a> 
      </li> 
      <li class="active dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Employees <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li> 
         <a href="#">New Employee</a> 
        </li> 
        <li class="divider"></li> 
        <li class="nav-header">Reports</li> 
        <li> 
         <a href="#" target="_blank">Employees List</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li> 
       <a href="#">logout</a> 
      </li> 
     </ul> 
     <form class="navbar-form navbar-right" role="search"> 
      <div class="form-group"> 
       <input type="text" class="form-control" placeholder="Search"> 
      </div> 
      <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
    </div> 
</nav>

來源

2014-01-08 22:05:01

非常感謝，現在定位非常好，但註銷鏈接現在變成藍色，不像員工鏈接例如，那麼反正我可以保持它像以前一樣（就像員工鏈接）？我試圖在註銷鏈接的表單中添加ul/li，但它弄亂了導航欄的外觀 – MChan

我更新了我的答案，現在您有了一個正常的菜單ul。 –

將搜索表單添加到頂部導航欄引導程序

回答

相關問題