引导3：当徽标增加Navbar的高度时，垂直居中导航链接 [英] Bootstrap 3 : Vertically Center Navigation Links when Logo Increasing The Height of Navbar

问题描述

我是新手的bootstrap框架，但即使在阅读所有的文档和所有现有的StackOverflow问题，我仍然有点卡住。

徽标增加NavBar的高度：

在我的导航栏中插入了高度为50像素的徽标。这显然使得导航条更高。

问题：

导航栏中的链接与现在更高的导航栏顶部对齐。

目标：

我想在导航栏中垂直居中的链接看起来更好。

---

我的假设是使用行高值或填充。但是，这引入了仍然在移动浏览器（切换到切换菜单）仍然生效的问题，所以我的扩展菜单结束了太高了，看起来很傻。

<非常感谢任何洞察力？

我的CSS是使用最新版本3.0.2下载的默认引导CSS。

这是我的HTML：

 <！ -  Begin NavBar  - > 
< div class =navbar navbar-inverse navbar-static-toprole =navigation> 
< div class =container> 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。menu2> 
< span class =sr-only>切换导航< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< span class =navbar-brandhref =＃>< img src =img / logo.pngwidth =210height =50alt =My Logo> ;< / span> 
< / div> 
 
 
< div class =navbar-collapse collapse menu2> 
 
< ul class =nav navbar-nav navbar-right> 
< li>< a href =＃>链接1< / a>< / li> 
< li>< a href =＃>链接2< / a>< / li& 
< li>< a href =＃>链接3< / a>< / li> 
< li>< a href =＃>链接4< / a>< / li& 
< / ul> 
 
< / div><！ -  /。nav-collapse  - > 
< / div> 
< / div> 
  

这是链接1，链接2，链接3和链接4

非常感谢您提前准备！

解决方案

将它添加到您的样式表。 line-height应与您的标志高度相符

  .navbar-nav li a {
 line-height：50px ; 
} 
  

检查下面的小提琴： http://jsfiddle.net/nD4tW/

I'm new to the bootstrap framework, but even after reading all the documentation and all the existing StackOverflow questions, I'm still a bit stuck.

Logo Increasing Height of NavBar:

In my navigation bar, I have inserted a logo that has a height of 50px. This obviously makes the navbar taller. I have not adjusted any CSS for this, it is simply the logo that is forcing the increased height.

Problem:

The links in the navbar are aligned to the top of the now taller navbar.

Goal:

I'd like the links vertically centered in the navbar as that will look much better.

---

My assumption was to play with line-height values or padding. However, that introduced the problem of still taking effect on mobile browsers (when it switches to the toggle menu) so my expanded menu ends up being way too tall that it looked silly.

Any insight is greatly appreciated?

My CSS is the default bootstrap CSS downloaded with the latest version 3.0.2.

Here is my HTML:

<!-- Begin NavBar -->
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".menu2">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand" href="#"><img src="img/logo.png" width="210" height="50" alt="My Logo"></span>
    </div>


    <div class="navbar-collapse collapse menu2">

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>

    </div><!--/.nav-collapse -->
  </div>
</div>

It is those "Link 1", "Link 2", "Link 3" and "Link 4" links that are aligning to the top, when I really want them to be aligned vertically in the center.

Many thanks in advance!

解决方案

add this to your stylesheet. line-height should match the height of your logo

.navbar-nav li a {
 line-height: 50px;
}

Check out the fiddle at: http://jsfiddle.net/nD4tW/

这篇关于引导3：当徽标增加Navbar的高度时，垂直居中导航链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！