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

我希望占位符文本（“搜索”）与导航文本（Blog，About）垂直对齐。Bootstrap - 导航栏中的中心文本和搜索字段

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

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

来源

2014-10-13 emd

您必须正确设置.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/

来源

2014-10-13 03:40:17

使用 '右拉式' 级对齐表格

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

然后，让你的display: inline-block输入和使用line-height: 30px对齐内联元素verticaly

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

来源

2014-10-13 03:37:00 monkeyinsight

谢谢，这很好。 – emd

我与其他几个例子（我不完全了解引导如何运作尚）发挥各地，并得到了它与这方面的工作，以及：

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

来源

2014-10-13 03:59:26 emd

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

回答

相关问题