blocks|key|169140|text|使用Bootstrap+Customizer生成具有更高导航栏的引导程序版本。您想要更改的值是Navbar+section中的@navbar-height。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|169141|检查您当前的实现，查看带有50px品牌图像的导航栏有多高，并在Customizer中使用计算出的高度。|169142|entityMap|0|LINK|mutability|MUTABLE|url|http://getbootstrap.com/customize/|1|http://getbootstrap.com/customize/#variables-navbar^0|1R|E|2|K|0|1B|E|1|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@$9|U|A|V|1|W]|$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]|P|$5|K|L|M|E|$N|Q]]]]

Use the <a href="http://getbootstrap.com/customize/" rel="nofollow">Bootstrap Customizer</a> to generate a version of Bootstrap that has a taller navbar. The value you want to change is <code>@navbar-height</code> in the <a href="http://getbootstrap.com/customize/#variables-navbar" rel="nofollow">Navbar section</a>.

Inspect your current implementation to see how tall your navbar is with the 50px brand image, and use that calculated height in the Customizer.

blocks|key|171113|text|将此代码添加到样式表中。线条高度应与您的徽标高度相匹配|type|unstyled|depth|inlineStyleRanges|entityRanges|data|171114|.navbar-nav+li+a+{
+line-height:+50px;
}|code-block|syntax|javascript|171115|请访问：http://jsfiddle.net/nD4tW/查看小提琴|offset|length|171116|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/nD4tW/^0|0|0|4|Q|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

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

<pre><code>.navbar-nav li a {
 line-height: 50px;
}
</code></pre>

Check out the fiddle at: <a href="http://jsfiddle.net/nD4tW/">http://jsfiddle.net/nD4tW/</a>

blocks|key|2984680|text|Bootstrap自动将导航栏的高度设置为50px。链接上方和下方的填充设置为15px。我认为bootstrap给你的logo添加了填充。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2984681|您可以删除徽标上方和下方的一些填充，也可以在链接上方和下方添加更多填充。|2984682|添加更多填充应该如下所示：|2984683|nav.navbar-inverse>li>a+{
+padding-top:+25px;
+padding-bottom:+25px;
}|code-block|syntax|javascript|2984684|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Bootstrap sets the height of the navbar automatically to 50px. The padding above and below links is set to 15px. I think that bootstrap is adding padding to your logo.

You can either remove some of the padding above and below your logo or you can add more padding above and below links. 

Adding more padding should look something like this:

<pre><code>nav.navbar-inverse&gt;li&gt;a {
 padding-top: 25px;
 padding-bottom: 25px;
}
</code></pre>

blocks|key|2771619|text|Matt的回答很好，但为了避免这一点传播到导航栏中的其他元素(比如当您还有一个下拉菜单时)，可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2771620|.navbar-nav+>+li+>+a+{
+++line-height:+50px;
}|code-block|syntax|javascript|2771621|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Matt's answer is fine, but just to avoid this to propagate to other elements inside the navbar (like when you also have a dropdown), use

<pre><code>.navbar-nav &gt; li &gt; a {
 line-height: 50px;
}
</code></pre>

blocks|key|172836|text|我发现你不一定需要文本垂直居中，它在靠近行的底部看起来也很好，只有当它在顶部(或高于中心？)它看起来是错的。所以我用这个来把链接推到行底：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|172837|.navbar-brand+{
++++min-height:+80px;
}

@media+(min-width:+768px)+{
++++#navbar-collapse+{
++++++++position:+absolute;
++++++++bottom:+0px;
++++++++left:+250px;
++++}
}|code-block|syntax|javascript|172838|我的品牌形象是SVG，我用的是height:+50px;+width:+auto，它的宽度大约是216px。它垂直地溢出了它的容器，所以我添加了min-height:+80px;来为它腾出空间，再加上bootstrap的15px边距。然后，我调整了navbar-collapse的left设置，直到它看起来正确。|offset|length|style|CODE|172839|entityMap^0|0|0|F|P|20|H|3G|F|3W|4|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]|$I|V|J|W|K|L]|$I|X|J|Y|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|N|$]]

I found that you don't necessarily need the text vertically centred, it also looks good near the bottom of the row, it's only when it's at the top (or above centre?) that it looks wrong. So I went with this to push the links to the bottom of the row:

<pre><code>.navbar-brand {
 min-height: 80px;
}

@media (min-width: 768px) {
 #navbar-collapse {
 position: absolute;
 bottom: 0px;
 left: 250px;
 }
}
</code></pre>

My brand image is SVG and I used <code>height: 50px; width: auto</code> which makes it about 216px wide. It spilled out of its container vertically so I added the <code>min-height: 80px;</code> to make room for it plus bootstrap's 15px margins. Then I tweaked the <code>navbar-collapse</code>'s <code>left</code> setting until it looked right.

blocks|key|2984758|text|实际上，我最终得到了类似这样的东西，以允许导航栏崩溃。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2984759|@media+(min-width:+768px)+{+//set+this+to+wherever+the+navbar+collapse+executes
++.navbar-nav+>+li+>+a{
++++line-height:+7em;+//set+this+height+to+the+height+of+the+logo.
++}
}|code-block|syntax|javascript|2984760|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I actually ended up with something like this to allow for the navbar collapse. 

<pre><code>@media (min-width: 768px) { //set this to wherever the navbar collapse executes
 .navbar-nav &gt; li &gt; a{
 line-height: 7em; //set this height to the height of the logo.
 }
}
</code></pre>

I'm new to the bootstrap framework.

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.

<hr>

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:

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


 &lt;div class="navbar-collapse collapse menu2"&gt;

 &lt;ul class="nav navbar-nav navbar-right"&gt;
 &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;

 &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

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.

Bootstrap 3 : Vertically Center Navigation Links when Logo Increasing The Height of Navbar

容器

我刚接触bootstrap框架。增加NavBar高度的标识：在导航栏中，我插入了一个高度为50px的徽标。这显然会使导航栏变得更高。我没有为此调整任何CSS，它只是标志，这是迫使增加的高度。问题：导航栏中的链接与现在更高的导航栏的顶部对齐。目标：我希望链接垂直居中的导航栏，因为那样会看起来更好。我的假设是使用行高值或填...

问Bootstrap 3:当Logo增加导航栏的高度时，将导航链接垂直居中
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 3:当Logo增加导航栏的高度时，将导航链接垂直居中EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 3:当Logo增加导航栏的高度时，将导航链接垂直居中
EN