Добавление формы поиска в начало navbar bootstrap

Я пытаюсь добавить форму поиска в верхний навигационный код, показанный ниже, чтобы он появился непосредственно перед ссылкой «Выход» с небольшим пространством и выровнен с правой стороны, но он всегда появляется либо после выхода из системы, или он будет расширять навигационную панель и выглядеть плохо.Добавление формы поиска в начало navbar bootstrap

Так может кто-нибудь, пожалуйста, помогите мне, сообщив мне, что мне здесь не хватает? Спасибо за ваше время.

Руководитель секции: секция

<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 кажется недействительным ... некоторые незакрытые divs. –

Это действительно огромная страница, где находится этот код, поэтому я просто добавил, что код, связанный с навигационной панелью, так как остальное совершенно не имеет значения. – 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

Большое спасибо, теперь позиционирование замечательно, но ссылка Logout теперь синяя, а не как сотрудники ссылка, например, так или иначе я могу сохранить ее так, как она была раньше (так же, как ссылка Employee)? Я попробовал добавить ul/li внутри формы для ссылки выхода, но это испортило внешний вид навигатора – MChan

Я обновил свой ответ, теперь у вас есть обычное меню ul. –

Добавление формы поиска в начало navbar bootstrap

ответ

Смежные вопросы