将搜索表单添加到顶部导航栏引导程序

我试图将搜索表单添加到下面显示的顶部导航栏代码中，以便它在出现在注销链接之前时有一个小空间并对齐到右侧，但它总是显示为在注销链接之后，或者它会扩展导航栏，看起来很糟糕。将搜索表单添加到顶部导航栏引导程序

那么有人可以帮助我告诉我我在这里失踪了什么？谢谢你的时间。

头部分：

<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。 –

将搜索表单添加到顶部导航栏引导程序

回答

相关问题