Всем привет!. У меня проблема с подключением css. Скачал шаблон с интернета и подключил к джанго.
Код в base.html:
<!doctype html>
<html lang="en">
{% load static %}
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="{% static 'img/favicon.png' %}" type="image/png">
<title>About Us</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'vendors/linericon/style.css' %}">
<link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}">
<link rel="stylesheet" href="{% static 'vendors/owl-carousel/owl.carousel.min.css' %}">
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}">
<link rel="stylesheet" href="{% static 'vendors/nice-select/css/nice-select.css' %}">
<!-- main css -->
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<!--================ Start Header Area =================-->
<header class="header_area">
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand logo_h" href="index.html"><img src="{% static 'img/logo.png' %}" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<ul class="nav navbar-nav menu_nav justify-content-end">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item active"><a class="nav-link" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="services.html">Services</a></li>
<li class="nav-item"><a class="nav-link" href="portfolio.html">Portfolio</a></li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Pages</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="elements.html">Elements</a></li>
<li class="nav-item"><a class="nav-link" href="portfolio-details.html">Portfolio Details</a></li>
</ul>
</li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Blog</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="blog.html">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="single-blog.html">Blog Details</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
</body>
</html>
У меня полностью подключился bootstrap, но проблема с главным css файлом css/style.css
Код в css/style.css:
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500|Rubik:500,700");
/*---------------------------------------------------- */
/*----------------------------------------------------*/
/* Medium Layout: 1280px */
/* Tablet Layout: 768px */
/* Mobile Layout: 320px */
/* Wide Mobile Layout: 480px */
/*---------------------------------------------------- */
/*----------------------------------------------------*/
/*---------------------------------------------------- */
/*----------------------------------------------------*/
.header_area {
position: absolute;
width: 100%;
z-index: 9999;
background: #ffffff; }
.header_area .menu_nav {
width: 100%; }
.header_area .navbar {
background: transparent;
padding: 0px;
border: 0px;
border-radius: 0px;
width: 100%; }
.header_area .navbar .nav .nav-item {
margin-right: 45px; }
.header_area .navbar .nav .nav-item .nav-link {
font: 500 14px/100px "Rubik", sans-serif;
text-transform: uppercase;
color: #000000;
padding: 0px;
display: inline-block; }
.header_area .navbar .nav .nav-item .nav-link:after {
display: none; }
.header_area .navbar .nav .nav-item:hover .nav-link, .header_area .navbar .nav .nav-item.active .nav-link {
color: #4458dc; }
.header_area .navbar .nav .nav-item.submenu {
position: relative; }
.header_area .navbar .nav .nav-item.submenu ul {
border: none;
padding: 0px;
border-radius: 0px;
box-shadow: none;
margin: 0px;
background: #fff; }
@media (min-width: 992px) {
.header_area .navbar .nav .nav-item.submenu ul {
position: absolute;
top: 120%;
left: 0px;
min-width: 200px;
text-align: left;
opacity: 0;
transition: all 300ms ease-in;
visibility: hidden;
display: block;
border: none;
padding: 0px;
border-radius: 0px;
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1); } }
.header_area .navbar .nav .nav-item.submenu ul:before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #eeeeee transparent transparent transparent;
position: absolute;
right: 24px;
top: 45px;
z-index: 3;
opacity: 0;
transition: all 400ms linear; }
.header_area .navbar .nav .nav-item.submenu ul .nav-item {
display: block;
float: none;
margin-right: 0px;
border-bottom: 1px solid #ededed;
margin-left: 0px;
transition: all 0.4s linear; }
.header_area .navbar .nav .nav-item.submenu ul .nav-item .nav-link {
line-height: 45px;
color: #000000;
padding: 0px 30px;
transition: all 150ms linear;
display: block;
text-transform: capitalize;
margin-right: 0px; }
.header_area .navbar .nav .nav-item.submenu ul .nav-item:last-child {
border-bottom: none; }
.header_area .navbar .nav .nav-item.submenu ul .nav-item:hover .nav-link {
color: #fff; }
@media (min-width: 992px) {
.header_area .navbar .nav .nav-item.submenu:hover ul {
visibility: visible;
opacity: 1;
top: 100%; } }
.header_area .navbar .nav .nav-item.submenu:hover ul .nav-item {
margin-top: 0px; }
.header_area .navbar .nav .nav-item:last-child {
margin-right: 0px; }
.header_area.navbar_fixed .main_menu {
position: fixed;
width: 100%;
top: -70px;
left: 0;
right: 0;
background: #ffffff;
transform: translateY(70px);
transition: transform 500ms ease, background 500ms ease;
-webkit-transition: transform 500ms ease, background 500ms ease;
box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1); }
.header_area.navbar_fixed .main_menu .navbar .nav .nav-item .nav-link {
line-height: 70px; }
@media (min-width: 992px) {
.header_area.white_menu .navbar .navbar-brand img {
display: none; }
.header_area.white_menu .navbar .navbar-brand img + img {
display: inline-block; } }
@media (max-width: 991px) {
.header_area.white_menu .navbar .navbar-brand img {
display: inline-block; }
.header_area.white_menu .navbar .navbar-brand img + img {
display: none; } }
.header_area.white_menu .navbar .nav .nav-item .nav-link {
color: #fff; }
.header_area.white_menu.navbar_fixed .main_menu .navbar .navbar-brand img {
display: inline-block; }
.header_area.white_menu.navbar_fixed .main_menu .navbar .navbar-brand img + img {
display: none; }
.header_area.white_menu.navbar_fixed .main_menu .navbar .nav .nav-item .nav-link {
line-height: 70px;
color: #000000; }
Если просто открыть base.html в браузере все нормально работает, но в django не правильно срабатывают стили.
При открытии в браузере:
При открытии с django:
Не могу понять в чем проблема
