垂直对齐引导导航按钮
问题描述:
我与Bootstrap和响应式网站设计玩转。 我有一个自定义的导航栏(高度固定为100px),当我尝试折叠它时,切换按钮不是垂直对齐的。垂直对齐引导导航按钮
CSS:
.navbar {
border : none;
border-radius: 0;
margin-bottom: 0;
}
.navbar-default {
background-color: white;
}
.navbar-brand, .navbar-nav li a {
line-height: 100px;
height: 100px;
padding-top: 0;
margin-left: 30px;
font-family: 'pacifico', cursive;
font-size: 1.4em;
}
.navbar-brand img {
width: auto;
height: 100px;
}
和HTML:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/app">
<img src="img/brand.png">
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li><a href="#/home">Home</a></li>
<li><a href="#/tattoos">Tattoos</a></li>
<li><a href="#/art">Art</a></li>
<li><a href="#/life">Life with Mr.Rime</a></li>
</ul>
</div>
</div>
</nav>
有人可以帮忙吗?
答
这可能不是最“优雅”的解决方案,但由于您的导航栏始终为100像素的固定高度,因此您可以简单地调整navbar-toggle
类的margin-top
值。
它看起来像你的“汉堡包”按钮在高度34个像素,所以你只需要以下添加到您的CSS文件:
.navbar-toggle {
margin-top: 33px;
}
没错,这就是我的想法,但我一直在寻找您提到的“优雅”解决方案!这是个窍门,但我确信有一个像素完美的解决方案...... – aur8l