Css 引导-在导航栏中居中文本和搜索字段

我希望占位符文本（“搜索”）与导航文本（博客，关于）垂直对齐

我希望博客/将在导航栏中垂直居中

我很难使用CSS，所以我不太确定要添加/更改哪些类

例如

我正在使用的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>

---

使用“向右拉”类对齐表单

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

然后使

显示：内联块

您的输入，并使用

行高：30px

垂直对齐内联元素

---

您必须正确设置

.blog nav item

选择器的

padding

和

line height

属性

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

---

Fiddle:

我使用了一些其他示例（我还不完全了解引导程序是如何工作的），并使其与以下示例一起工作：

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

{{nav from=“/”max_depth=“2”}

{{/nav}