ブートストラップがNavbarの2番目の行にグリフをラップします

Question

検索グリフコンが押されたときに隠れて表示される検索ボックスを（表示と非表示の部分が動作する）ブートストラップWebサイトに設定しようとしていますが、

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

そしてhide-とshow-プロセスを管理するJavaScriptコード：

この

は私のコードです：レンダリングされ、glyphiconは、ナビゲーションバーの2行目に移動させ、次のようになります。

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

どうすればこの問題を解決できますか？私はクロームコンソールでいくつか試行錯誤しましたが、解決策は見つかりませんでした。

これは私の問題を実証JSFiddleへのリンクです：https://jsfiddle.net/bu3kqL0d/1/

Answer 1

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

DIVはglyphiconが次の行に押し込まれます理由で、デフォルトでdisplay: blockあります。試してください：

.search { display: inline-block; } 

Answer 2

は、アイコンを検索するposition:absolute;を追加します。