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中它看起来都是这样的（注意蓝色悬停颜色和下划线，对于＆＃34; Logo＆＃34;除了下划线之外的文字是白色的）：

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

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解决了问题。

为什么Materialise.css没有按预期工作？

2 个答案: