为什么Materialize.css无法按预期工作？

Question

我想实现一个Materialize.css导航栏看起来应该像这样的：

我作为以他们为榜样提供了以下HTML：

<div> 
    <div class="navbar-fixed"> 
     <nav> 
      <div class="nav-wrapper"> 
       <a href="#!" class="brand-logo">Logo</a> 
       <ul class="right hide-on-med-and-down"> 
        <li><a href="sass.html">Sass</a></li> 
        <li><a href="badges.html">Components</a></li> 
       </ul> 
      </div> 
     </nav> 
    </div> 
</div> 

但是在IE 11和Chrome它看起来像这样（注意蓝色悬停颜色和下划线，除了下划线是白色以外，与“标识”文本相同）：

当我缩小窗口时，菜单完全消失，而不是像他们的例子那样变成左边的菜单。这就是我的样子：

Answer 1

轮到你的菜单到左侧菜单中的移动，你必须使用一个navbar与移动崩溃（http://materializecss.com/navbar.html#mobile-collapse）。

你的HTML标记更改为：

<div> 
    <div class="navbar-fixed"> 
     <nav> 
      <div class="nav-wrapper"> 
       <a href="#!" class="brand-logo">Logo</a> 
       <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a> 
       <ul class="right hide-on-med-and-down"> 
        <li><a href="sass.html">Sass</a></li> 
        <li><a href="badges.html">Components</a></li> 
       </ul> 
       <ul class="side-nav" id="mobile-demo"> 
        <li><a href="sass.html">Sass</a></li> 
        <li><a href="badges.html">Components</a></li> 
       </ul> 
      </div> 
     </nav> 
    </div> 
</div> 

，并使用此jQuery代码：

$(document).ready(function(){ 
    $(".button-collapse").sideNav(); 
}); 

Answer 2

固定它。这实际上是因为默认的ASP.NET MVC 5模板使用Bootstrap。 Bootstrap违反了条款，删除Bootstrap解决了这个问题。