Html Bootstrap 导航栏高度在插入品牌形象时发生了变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15595040/
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 navbar height changed on inserting brand image
提问by Ram
I am new to HTML and CSS and have started coding in the last 4 days. I found bootstrap very useful to get things moving quickly.
我是 HTML 和 CSS 的新手，并且在过去 4 天内开始编码。我发现引导程序对于让事情快速发展非常有用。
Here is my attempt at getting a Navbar with transparency and fixed to the top.
这是我尝试获得具有透明度并固定在顶部的导航栏。
http://jsfiddle.net/revanur/mf5wc/4/
http://jsfiddle.net/revanur/mf5wc/4/
<!-- Top-Navigation-Bar -->
<div class="row-fluid">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner" id="topbar">
<div class="container"> <a href="#"><img class = "brand" src="http://placehold.it/269x50" alt="SparkCharger" /></a>
<button id="topbtn" type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<div class="nav-collapse">
<ul class="nav pull-right">
<li class="active">
<form class="navbar-search brand">
<input type="text" class="search-query" placeholder="Search">
</form>
</li>
<li><a href="#"> <h5> Discover </h5></a>
</li>
<li><a href="#"> <h5> Blog </h5></a>
</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><h5>Start <span class="caret"></span></h5></a>
<ul class="dropdown-menu">
<li><a href="#"> <h6> Login </h6></a>
</li>
<li><a href="#"> <h6> Signup </h6></a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /Top-Navigation-Bar -->
However, the height of the navbar seems to change based on brand image size. I have no problem with that but I notice significant spacing between the image and the navbar top and bottom. How do I change this. Also, is it possible to fix the navbar size so that the navbar does not have a mind of its own.
但是，导航栏的高度似乎会根据品牌形象大小而变化。我对此没有问题，但我注意到图像与导航栏顶部和底部之间的间距很大。我该如何改变这一点。此外，是否可以修复导航栏大小，以便导航栏没有自己的想法。
回答by lflores
There are a few things affecting the height of the navbar:
有几件事会影响导航栏的高度：
- div class="navbar-inner" (5px padding)
- img class="brand" (10px padding)
- the size of the image
- div class="navbar-inner"（5px 填充）
- img class="brand"（10px 填充）
- 图像的大小
You can remove the padding by:
您可以通过以下方式删除填充：
img.brand {
padding: 0;
}
And/Or you can specify the height of the navbar:
和/或您可以指定导航栏的高度：
div.navbar-inner {
height: 10px;
}
