在导航栏中使用图标的缩放问题

Question

我使用 materialize.css 在导航栏中设置了图标。当 window 低于某个阈值时，所有图标都会移到顶部。如何在不隐藏小屏幕图标的情况下防止这种移动？

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

您可以修复图标的行高。参见 fiddle。

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

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

Answer 2

CSS Media Queries 在您的代码中使用（在 ghpages-materialize.css 中），这意味着不同的屏幕（或 window）尺寸有不同的样式：

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

在导航栏中使用图标的缩放问题

Scaling issue using icons in navbar

html

css

materialize