垂直對齊引導導航按鈕

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; 
}