Question

我希望占位符文字（＆＃34;搜索＆＃34;）与导航文字（博客，关于）垂直对齐。

我希望博客/关于在导航栏中垂直居中。

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

使用'pull-right'类来对齐表单

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

然后输入display: inline-block您的输入并使用line-height: 30px来对齐内联元素

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

Answer 2

您必须正确设置padding选择器的line-height和.blog-nav-item属性。

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

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

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>

Bootstrap - 导航栏中的中心文本和搜索字段

3 个答案: