navbarのnavbar要素の垂直方向のアライメントの問題

Question

以下に示すように、私はブートストラップで作成した非常に単純なnavbarを持っています。私が持っている問題は、左の3つのアイテムがうまく整列していることです（水平：左と垂直：中央）。しかし、右揃えのアイテムが何らかの理由でNavbarの上部に貼り付いてしまいます。どのように私がそれらを中心に垂直に整列させることができるかについてのヒントは高く評価されるだろう。

@using (Html.BeginForm("SearchName", "Home", FormMethod.Post)) 
{ 
    <div class="container"> 
     <nav class="navbar navbar-default navbar-inverse"> 
      <div class="container-fluid"> 
       <ul class="nav navbar-nav"> 
        <li><a href="/" class="glyphicon glyphicon-book"></a></li> 
        <li><a href="/">Home</a></li> 
        <li><a href="/Home/ContactUs">Contact us</a></li> 
       </ul> 
       <ul class="nav navbar-nav navbar-right"> 
        <li id="custom-search-input"> 
         <input type="text" id="SearchTerm" name="SearchTerm" class="form-control input-sm" placeholder="Search by Name/Profession" /> 
        </li> 
        <li> 
         <span class="input-group-btn"> 
          <button class="btn btn-info btn-sm" type="submit"> 
           <i class="glyphicon glyphicon-search"></i> 
          </button> 
         </span> 
        </li> 
       </ul> 
      </div> 
     </nav> 
    </div> 
} 

Answer 1

簡単な回避策は、それが内部のマークアップを含め全体を削除している

<form class="navbar-form navbar-right" role="search"> 
     <div class="form-group"> 
      <input type="text" id="SearchTerm" name="SearchTerm" class="form-control input-sm" placeholder="Search by Name/Profession" /> 
     </div> 

     <button type="submit" class="btn btn-default">Search</button> 
</form> 

Answer 2

ul.nav.navbar-nav.navbar-right要素にマージントップCSSルールを使用します。ウェブサイトを表示するすべてのブラウザのコンテナの左側にあるメニューに最もよく合うように調整します。

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

し、それを置き換える：