Bootstrap - текстовое и текстовое поле центра в панели навигации

Question

Я хочу, чтобы текст заполнителя («Поиск») был вертикально выровнен с навигационным текстом («Блог», «О программе»).

Я хотел бы, чтобы блог/был вертикально центрирован в навигационной панели.

Я борюсь с 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

Необходимо установить правильное значение padding и line-height вашего .blog-nav-item.

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

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

Я играл с несколькими другими примерами (я не в полной мере понять, как работает Bootstrap еще) и получил его на работу, а с этим:

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