问题描述
我下载了一个管理主题,将CSS放入Django静态变量后,移动切换不再显示。我遍历了所有CSS和js链接(在索引模板中),它们都链接到正确的路径,但未显示切换。
这是HTML和CSS,请提供帮助。
<nav class="navbar top-navbar navbar-expand-md navbar-dark">
<!-- ============================================================== -->
<!-- logo -->
<!-- ============================================================== -->
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<!-- logo icon --><b>
<!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
<!-- Dark logo icon -->
<img src="../assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
<!-- Light logo icon -->
<img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo" />
</b>
<!--End logo icon -->
<!-- logo text --><span>
<!-- dark logo text -->
<img src="../assets/images/logo-text.png" alt="homepage" class="dark-logo" />
<!-- Light logo text -->
<img src="../assets/images/logo-light-text.png" class="light-logo" alt="homepage" /></span>
</a>
</div>
<!-- ============================================================== -->
<!-- End logo -->
<!-- ============================================================== -->
<div class="navbar-collapse">
<!-- ============================================================== -->
<!-- toggle and nav items -->
<!-- ============================================================== -->
<ul class="navbar-nav mr-auto">
<!-- This is -->
<li class="nav-item hidden-sm-up"> <a class="nav-link nav-toggler waves-effect waves-light"
href="javascript:void(0)"><i class="ti-menu"></i></a></li>
<!-- ============================================================== -->
<!-- Search -->
<!-- ============================================================== -->
<li class="nav-item search-Box"> <a class="nav-link waves-effect waves-dark"
href="javascript:void(0)"><i class="fa fa-search"></i></a>
<form class="app-search">
<input type="text" class="form-control" placeholder="Search & enter"> <a
class="srh-btn"><i class="fa fa-times"></i></a>
</form>
</li>
</ul>
<ul class="navbar-nav my-lg-0">
<!-- ============================================================== -->
<!-- User profile and search -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href=""
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img
src="../assets/images/users/1.jpg" alt="user" class="img-circle" width="30"></a>
</li>
<!-- ============================================================== -->
<!-- User profile and search -->
<!-- ============================================================== -->
</ul>
</div>
</nav>
<!-- Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<aside class="left-sidebar">
<div class="d-flex no-block nav-text-Box align-items-center">
<span><img src="../assets/images/logo-icon.png" alt="elegant admin template"></span>
<a class="waves-effect waves-dark ml-auto hidden-sm-down" href="javascript:void(0)"><i
class="ti-menu"></i></a>
<a class="nav-toggler waves-effect waves-dark ml-auto hidden-sm-up" href="javascript:void(0)"><i
class="ti-menu ti-close"></i></a>
</div>
CSS
@import url(../../../assets/icons/font-awesome/css/font-awesome.min.css);
@import url(../../../assets/icons/themify-icons/themify-icons.css);
@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,600,700");
.skin-default-dark {
/*Theme Colors*/ }
.skin-default-dark .topbar {
background: #fff; }
.skin-default-dark .topbar .navbar-dark .navbar-nav .nav-link {
color: #adb5bd; }
.skin-default-dark .sidebar-nav ul li a.active,.skin-default-dark .sidebar-nav ul li a:hover {
color: #009efb; }
.skin-default-dark .sidebar-nav ul li a.active i,.skin-default-dark .sidebar-nav ul li a:hover i {
color: #009efb; }
.skin-default-dark .sidebar-nav > ul > li.active > a {
color: #009efb; }
.skin-default-dark .sidebar-nav > ul > li.active > a i {
color: #009efb; }
.skin-default-dark .page-titles .breadcrumb .breadcrumb-item.active {
color: #009efb; }
.skin-default-dark .topbar .top-navbar .navbar-header .navbar-brand .dark-logo {
display: inline-block;
color: rgba(255,255,0.8); }
.skin-default-dark .topbar .top-navbar .navbar-header .navbar-brand .light-logo {
display: none; }
.skin-default-dark .left-sidebar {
background: #2b2f3a; }
.skin-default-dark .left-sidebar .user-pro-body a.link {
color: #8991a9; }
.skin-default-dark .left-sidebar .nav-text-Box {
border-color: transparent;
background: rgba(0,0.3); }
.skin-default-dark .left-sidebar .sidebar-nav > ul > li > a,.skin-default-dark .left-sidebar .sidebar-nav ul li a {
color: #8991a9;
-webkit-transition: 0.1s ease-in;
-o-transition: 0.1s ease-in;
transition: 0.1s ease-in; }
.skin-default-dark .left-sidebar .sidebar-nav > ul > li > a i,.skin-default-dark .left-sidebar .sidebar-nav ul li a i {
color: #7f879b; }
.skin-default-dark .left-sidebar .sidebar-nav > ul > li > a:hover i,.skin-default-dark .left-sidebar .sidebar-nav > ul > li > a:hover,.skin-default-dark .left-sidebar .sidebar-nav ul li a:hover i,.skin-default-dark .left-sidebar .sidebar-nav ul li a:hover {
color: #fff; }
.skin-default-dark .left-sidebar .sidebar-nav > ul > li > a.active,.skin-default-dark .left-sidebar .sidebar-nav > ul > li > a.active i,.skin-default-dark .left-sidebar .sidebar-nav ul li a.active,.skin-default-dark .left-sidebar .sidebar-nav ul li a.active i {
color: #fff; }
.skin-default-dark .left-sidebar .sidebar-nav > ul > li.selected > a {
color: #fff; }
.skin-default-dark .left-sidebar .sidebar-nav > ul > li.selected > a i {
color: #fff; }
.skin-default-dark .left-sidebar .sidebar-nav ul li ul {
background: rgba(0,0.2); }
.skin-default-dark .ps > .ps__scrollbar-y-rail > .ps__scrollbar-y {
background-color: rgba(255,0.2); }
@media (min-width: 768px) {
.skin-default-dark.mini-sidebar .sidebar-nav #sidebarnav > li > ul,.skin-default-dark.mini-sidebar .sidebar-nav #sidebarnav > li:hover > a {
background: #1f2023; } }
这是一个django项目,但是我所有的静态文件都放在一个文件夹中,但是看来我已经不在了,我尝试了很多事情!让我感到沮丧的是,原始文件夹中下载的文件运行良好。
解决方法
CSS文件中有两个@impors,它们是:
@import url(../../../assets/icons/font-awesome/css/font-awesome.min.css);
@import url(../../../assets/icons/themify-icons/themify-icons.css);
我只是从那里剪下来,然后像这样将它们放在html中:
<link href="{% static 'users/crm2/assets/icons/font-awesome/css/font-awesome.min.css' %} " rel="stylesheet">
<link href="{% static 'users/crm2/assets/icons/themify-icons/themify-icons.css' %}" rel="stylesheet">
就是这样!