时间戳

首页 > 解决方案 > 物化 css 不适用于静态 css 文件

javascript - 物化 css 不适用于静态 css 文件

问题描述

我正在尝试在我的网页上实现导航栏。到目前为止我已经完成了，但是当我尝试在移动设备上打开页面时，它没有显示任何导航栏链接。我遇到了这个“汉堡菜单”，下面的代码完美运行，唯一的问题是当我尝试替换

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

和

<link type="text/css" rel="stylesheet" href="{% static 'competition/materialize.css' %}"/>

它指的是我文件夹中的 css 文件，它停止工作。通过停止工作，我的意思是可折叠菜单在移动设备和 pc 上不起作用，可折叠菜单显示在徽标文本上。我需要在本地机器上使用 css 文件才能编辑导航栏的颜色。

{% load static %}
<head>
    <title></title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link type="text/css" rel="stylesheet" href="{% static 'competition/materialize.css' %}"  media="screen,projection"/>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
    <script>
      <!-- this part is important! -->
      $(document).ready(function () {
        $(".button-collapse").sideNav();
      });
    </script>
</head>
<body>
    <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 id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">JavaScript</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>
        <li><a href="collapsible.html">Javascript</a></li>
        <li><a href="mobile.html">Mobile</a></li>
        </ul>
    </div>
  </nav>
</body>

标签： javascriptjqueryhtmlcssmaterialize

解决方案

推荐阅读