垂直对齐引导导航按钮

Question

我与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> 

有人可以帮忙吗？

Answer 1

这可能不是最“优雅”的解决方案，但由于您的导航栏始终为100像素的固定高度，因此您可以简单地调整navbar-toggle类的margin-top值。

它看起来像你的“汉堡包”按钮在高度34个像素，所以你只需要以下添加到您的CSS文件：

.navbar-toggle { 
    margin-top: 33px; 
}