Bootstrap - 導航欄中的中心文本和搜索字段

Question

我希望佔位符文本（「搜索」）與導航文本（Blog，About）垂直對齊。

我希望博客/關於在導航欄中垂直居中。

我與CSS鬥爭，所以我不太確定要添加/更改哪些類。

例子here。

HTML我使用：

<header class= "blog-masthead"> 
<div class="container"> 
    <nav class="blog-nav"> 
     <a class="blog-nav-item " href="/blog">Blog</a> 
     <a class="blog-nav-item current" href="/about">About</a> 
    <form class="navbar-form navbar-right" role="search"> 
     <div class="form-group"> 
     <input type="text" class="form-control input-sm" placeholder="Search" id="sitesearch"> 
     </div> 
     <button type="submit" class="btn btn-xs"><span class="glyphicon glyphicon-search"></span></button> 
    </form> 
    </nav> 
</div> 

Answer 1

您必須正確設置.blog-nav-item選擇器的padding和line-height屬性。

.blog-nav-item { 
    padding: 13px; // vertical margin of navbar-form 
    line-height: 33px; // actual height of search fom 
} 

小提琴：http://jsfiddle.net/rgct4p0g/4/

Answer 2

使用 '右拉式' 級對齊表格

<form class="pull-right" role="search"> 

然後，讓你的display: inline-block輸入和使用line-height: 30px對齊內聯元素verticaly

http://jsfiddle.net/rgct4p0g/3/

Answer 3

我與其他幾個例子（我不完全瞭解引導如何運作尚）發揮各地，並得到了它與這方面的工作，以及：

<header class= "blog-masthead"> 
    <nav class="nav" role="navigation"> 
     <div class="container"> 
      <ul class="nav navbar-nav"> 
      {{ nav from="/" max_depth="2" }} 
       <li><a class="blog-nav-item {{ if is_current }}current{{ endif }}" href="{{ url }}">{{title}}</a></li> 
      {{ /nav }} 
      </ul> 
      <form class="navbar-form navbar-right" role="search"> 
       <div class="form-group"> 
       <input type="text" class="form-control input-sm" placeholder="Search" id="sitesearch"> 
       </div> 
       <button type="submit" class="btn btn-xs"><span class="glyphicon glyphicon-search"></span></button> 
      </form> 
     </div> 
    </nav> 
</header>