.navbar-brand
{
margin: 0;
padding: 0;
{
.navbar-brand img
{
max-height: 100%;
}
您需要调整导航栏的高度。
您可以在LESS中使用此变量来调整高度,它将垂直居中导航栏并包含所有必要的填充:
@navbar-height
默认值为50px。
在常规CSS中如何调整它是更改.navbar
的min-height
和navbar-fixed-top
的高度,然后调整.navbar-nav
的填充。
这是顶部应该结构化的方式(缺少navbar-header
):
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="/" title="www.site.nl">
<img src="//placehold.it/200x51">
</a>
</div>
示例Bootply:http://www.bootply.com/tOoeM8o8Om
此处提供一个Bootply示例,具体链接如上。<div class="container">
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar navbar-collapse collapse navbar-responsive-collapse">
<div class="pull-left" style="margin-right: 15px;">
<a rel="home" href="/" title="www.site.nl">
<img src="//placehold.it/200x51">
</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
</ul> <!-- end nav-->
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown"><strong class="caret"></strong> Select language</a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="">NL</a></li>
<li><a href="">IL</a></li>
<li><a href="">ENG</a></li>
</ul>
</li>
</ul> <!-- end nav menu right -->
</div> <!-- end nav-collapse -->
</div>
将您的徽标放置在容器内。
上述代码有效!
检查并告诉我是否有任何问题!
padding: 15px 15px;
。将其更改为padding: 0 15px 15px 15px;
将仅去除顶部填充,同时保留其他填充。 - James Korden