为什么 Materialize.css 没有按预期工作？答案

【问题标题】：Why is Materialize.css not working as expected?为什么 Materialize.css 没有按预期工作？
【发布时间】：2016-03-10 23:12:30
【问题描述】：

我正在尝试实现一个 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 中它看起来像这样（注意蓝色悬停颜色和下划线，与“徽标”文本相同，但下划线为白色）：

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

【问题讨论】：

标签： css asp.net-mvc asp.net-mvc-5 bower materialize

【解决方案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();
});

【讨论】：

【解决方案2】：

修复它。这实际上是因为默认的 ASP.NET MVC 5 模板使用 Bootstrap。 Bootstrap 打破了标准，移除 Bootstrap 即可解决问题。

【讨论】：