Sidenav UserView Materialize 不起作用答案

【问题标题】：Sidenav UserView Materialize doesn't workSidenav UserView Materialize 不起作用
【发布时间】：2016-12-04 11:36:58
【问题描述】：

我从 http://materializecss.com/side-nav.html 的 materialize 复制了示例 sidenav

所以我从检查元素中复制了代码，这就是我得到的

<!DOCTYPE html>
<html>
<head>
    <title>GROUPIE</title>  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".button-collapse").sideNav();
            $('.parallax').parallax();
            $('.modal-trigger').leanModal();
            $(".dropdown-button").dropdown({
                hover: false
            });
        });
    </script>
</head>
<body>
    <ul id="slide-out" class="side-nav" style="transform: translateX(0px)"> 
        <li>
            <div class="userView">
                <div class="backgroud">
                    <img src="assets/images/asdas.jpg">
                </div>
                <a href="#!user">
                    <img src="assets/images/logo.jpg">
                </a>
                <a href="#!name">
                    <span class="white-text name">
                        Jayvee Javier
                    </span>
                </a>
                <a href="#!email">
                    <span class="white-text email">
                        jayveejavier666@yahoo.com
                    </span>
                </a>
            </div>
        </li>
    </ul>

    <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>       
</body>
</html>

但是我得到了一个不同的输出（我比较了网站的输出和我实际得到的输出）

Expected Result vs Actualt Result

左图是它应该的样子。右图是我的实际结果。

它与示例中显示的非常不同。有什么我做错了吗？感谢大家的帮助。

【问题讨论】：

啊哈哈哈。嘿，对于这些情况，我使用 VS Code Spelling Checker。它应该在任何代码编辑器中都可用。自从我开始使用它并且我的拼写变得更好以来，我注意到错字错误显着减少。）））
被问到的问题与拼写检查无关。

标签： materialize

【解决方案1】：

我将class=backgroud 更改为class=background。像魅力一样工作。

【讨论】：