Бутстрап обертывает глификон во второй строке в navbar

Question

Я пытаюсь настроить окно поиска на моем сайте Bootstrap, который скрывает и показывает, когда нажимается глификон поиска (работает скрытая и демонстрационная часть), но когда поле ввода визуализируется, то glyphicon перемещается на вторую строку в навигационной панели:

Это мой код:

<nav class="navbar navbar-inverse navbar-static-top"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
          data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a href="index.php" class="navbar-brand"></a> 
       </div> 
       <div id="navbar" class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav"> 
         <li class="home nav-item"> 
          <a href="index.php"> 
           <span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home 
          </a> 
         </li> 
         <li class="products nav-item"> 
          <a href="products.php"> 
           <span class="glyphicon glyphicon-glass" aria-hidden="true"></span> Products 
          </a> 
         </li> 
        </ul> 
        <ul class="nav navbar-nav navbar-right"> 
         <li class="nav-item"> 
          <a title="Search" class="search-button"> 
           <div class="search"><input type="text" name="search" class="form-control" placeholder="Search..."></div> 
           <span class="glyphicon glyphicon-search"></span> 
          </a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </nav> 

и JavaScript-код, который управляет и шоу скрыть- элементы этой группы-процесс выглядит следующим образом:

var $search = $(".search"); 
    $search.hide(); 
    $(".glyphicon-search").click(function(){ 
     if ($search.is(":hidden")){ 
      $search.fadeIn(); 
     } else { 
      $search.fadeOut(); 
     } 
}) 

Как это исправить? Я сделал пробную ошибку с консолью chrome, но не нашел решения.

Это ссылка на JSFiddle демонстрирует мою проблему: https://jsfiddle.net/bu3kqL0d/1/

Answer 1

ДИВ является display: block по умолчанию, который является причиной, почему glyphicon получает толкнул в следующей строке. Попытка:

.search { display: inline-block; } 

Answer 2

Добавить position:absolute; искать иконку.

.search-button .glyphicon-search{ 
    position:absolute; 
    top:20px; 
    right:0; 
}