twitter-bootstrap 带有徽标或品牌名称文本的 Bootstrap 全响应式导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23700941/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap full responsive navbar with logo or brand name text
提问by Hladeo
I would like to do a full responsive navbar with specified height in Twitter Bootstrap 3.1.1, where the brand could consists of image (logo) or text.
我想在 Twitter Bootstrap 3.1.1 中做一个具有指定高度的完全响应式导航栏，其中品牌可以由图像（徽标）或文本组成。
html:
html：
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="http://placehold.it/150x50&text=Logo" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
css:
css：
body {
margin-top: 125px;
}
.navbar-fixed-top .nav {
padding: 15px 0;
}
The problem is that after the browser's window size is decreased and menu is collapsed, navbar returns to its original height and logo image is as below:
问题是浏览器窗口缩小，菜单折叠后，navbar恢复到原来的高度，logo图片如下：
The other problem is that changing <img src="http://placehold.it/150x50&text=Logo" alt="">into <h3>AppName</h3>makes that AppName is not in the middle:
另一个问题是更改<img src="http://placehold.it/150x50&text=Logo" alt="">为<h3>AppName</h3>AppName 不在中间：
Currently it is centered by setting padding values, but I do not know how to make it independent from it.
目前它通过设置填充值来居中，但我不知道如何使它独立于它。
Does anyone could help me solve this problem?
有没有人可以帮我解决这个问题？
Regards
问候
EDIT:
编辑：
Here are prepared images of effect that I want to achieve:
这是我想要实现的效果的准备图像：
not collapsed navbar with logo image:
未折叠带有徽标图像的导航栏：
collapsed navbar (the same height of navbar, the same size of image, but different width od navbar):
折叠导航栏（导航栏的高度相同，图像的大小相同，但导航栏的宽度不同）：
not collapsed navbar with brand name text:
未折叠带有品牌名称文本的导航栏：
collapsed navbar (everything is the same except width of navbar caused by changing browser's window width):
折叠的导航栏（除了由更改浏览器窗口宽度引起的导航栏宽度外，一切都相同）：
采纳答案by paulalexandru
If you want to achieve this(you can resize the window to see how it will look for mobile version), all you have to do is to have 2 logo images (1 for desktop and one for mobile) and display them depending of the enviroment using visible-xsand hidden-xsclasses.
如果您想实现这一点（您可以调整窗口大小以查看移动版本的外观），您所要做的就是拥有 2 个徽标图像（1 个用于桌面，1 个用于移动）并根据环境显示它们使用visible-xs和hidden-xs类。
So i used something like this:
所以我使用了这样的东西：
<img class="hidden-xs" src="http://placehold.it/150x50&text=Logo" alt="">
<img class="visible-xs" src="http://placehold.it/120x40&text=Logo" alt="">
And ofcourse, i styled the mobile logo using:
当然，我使用以下方法设计了移动徽标：
@media (max-width: 767px) {
.navbar-brand {
padding: 0;
}
.navbar-brand img {
margin-top: 5px;
margin-left: 5px;
}
}
You can see all the code here. In case you need a text on mobile version insted of the logo, it's not a big deal. Just replace the logo with a <h1 class="visible-xs">AppName</h3>and change the style inside the media query like this:
您可以在此处查看所有代码。如果您需要在移动版本上添加徽标的文本，这没什么大不了的。只需用 a 替换徽标<h1 class="visible-xs">AppName</h3>并更改媒体查询中的样式，如下所示：
@media (max-width: 767px) {
.navbar-brand {
padding: 0;
}
.navbar-brand h1{
//here add your style depending of the position you want the text to be placed
}
}
EDIT:
编辑：
You need this conditions to make it work:
您需要以下条件才能使其工作：
.navbar-toggle {
margin: 23px 0;
}
.navbar-nav, .navbar-nav li, .navbar-nav li a {
height: 80px;
line-height: 80px;
}
.navbar-nav li a {
padding-top: 0;
padding-bottom:0;
}
回答by Yogendra Rawal
Best approach to add a brand logo inside a navbar-innerclass and a container. About the <h3>issue <h3>has a certain padding given to it in bootstrap as @creimers told. And if you are using a bigger image, increase the height of navbar too or the logo will float outside.
在navbar-inner类和容器中添加品牌徽标的最佳方法。正如@creimers 所说，关于这个<h3>问题<h3>在引导程序中给出了一定的填充。如果您使用更大的图像，也请增加导航栏的高度，否则徽标会浮在外面。
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-inner"> <!--changes made here-->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="http://placehold.it/150x50&text=Logo" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>
回答by hamid
I checked and it worked for me.
我检查了一下，它对我有用。
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="margin-top:100px;"><!--style with margin-top according to your need-->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
回答by Pooja Khatri
Just set the height and width where you are adding that logo. I tried and its working fine
只需设置添加该徽标的高度和宽度即可。我试过了，它工作正常
回答by creimers
The placeholder image you're including has a height of 50px. It is wrapped in an anchor (.navbar-brand)with a padding-topof 15pxand a height of 50px. That's why the placeholder logo flows out of the bar. Try including a smaller image or play with the anchor's padding by assigning a classor an idto it wich you can reference in your css.
您包含的占位符图像的高度为50px. 它被包裹在anchor (.navbar-brand)apadding-top中15px，高度为50px。这就是占位符徽标流出栏的原因。尝试包含一个较小的图像或通过分配 aclass或 anid来使用锚点的填充，您可以在css.
EDITOr remove the static height: 50pxfrom .navbar-brand. Your navbar will then take the height of its highest child.
编辑或height: 50px从.navbar-brand. 然后您的导航栏将采用其最高孩子的高度。
h3in bootstrap by default has a padding-topof 20px. Again, it is wrapped with that padding-top: 15pxanchor. That's why it's not vertically centered like you want it. You could give the h3a classor and idthat resets the margin-top. And the same you could do with the paddingof the anchor.
h3在默认情况下，引导具有padding-top的20px。再一次，它被那个padding-top: 15px锚包裹着。这就是为什么它不像你想要的那样垂直居中。你可以给h3a classor 并id重置边距顶部。您可以padding对anchor.
Here's something to play with: http://jsbin.com/jelec/1/edit?html,output
这里有一些东西可以玩：http: //jsbin.com/jelec/1/edit?html,output
回答by Cory Twibell
I set .navbar-brand { min-height: inherit }which solved the issue for me (thanks @creimers for inspiration).
我设置.navbar-brand { min-height: inherit }为我解决了这个问题（感谢@creamers 的启发）。
