使用導航欄中的圖標來縮放問題

Question

我在導航欄中使用materialize.css來顯示圖標。當窗口降到某個閾值以下時，所有圖標都會移到頂部。 如何防止在沒有隱藏小屏幕上的圖標時發生這種變化？

Fiddle。注意當圖框的大小小於600px時圖標向上移動。

<nav> 
    <div class="nav-wrapper"> 
    <a href="#" class="brand-logo center"> 
     <i class="material-icons left">local_bar</i> 
     Title 
    </a> 
    <ul class="right"> 
     <li><a><i class="material-icons">more_vert</i></a></li> 
    </ul> 
    </div> 
</nav> 

Answer 1

CSS Media Queries在你的代碼中使用（在ghpages-materialize.css），這意味着有不同的風格不同的屏幕（或窗口）尺寸：

nav { 
    color: #fff; 
    background-color: #ee6e73; 
    width: 100%; 
    height: 56px; 
    line-height: 56px; 
} 

@media only screen and (min-width: 601px) 
nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i { 
    height: 64px; 
    line-height: 64px; 
} 

您可以防止這種換檔通過固定每種屏幕尺寸的樣式。 Chrome開發者工具可以幫助您解決這個問題。

您可以添加到您的CSS文件來解決它（所有媒體）：

nav { 
    height: 64px; 
    line-height: 64px; 
} 

i.material-icons.left { 
    line-height: 64px; 
} 

Answer 2

您可以修復圖標的行高。看小提琴。

http://jsfiddle.net/b6naew9h/16/

.material-icons { 
    line-height: 56px; 
}