时间戳

首页 > 解决方案 > css 在 Chrome 中不起作用但在 Opera 中起作用的原因可能是什么？

python - css 在 Chrome 中不起作用但在 Opera 中起作用的原因可能是什么？

问题描述

当我尝试向 Django 项目添加样式时，它们在 Chrome 中不起作用，但在 Opera 中起作用。CSS 非常简单，例如任何 Chrome 都应该支持 margin-top：

https://www.w3schools.com/cssref/pr_margin-top.asp

但与 Opera 不同，Chrome 看不到它。请告诉我，可能是什么问题？

我以这个项目为基础：

https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Home_page

在locallibrary\catalog\static\css\styles.css我有以下代码：

.sidebar-nav {
    margin-top: 30px;
    background-color: #87CEEB;
    padding: 0;
    list-style: none;
}


.container-fluid {
    margin-top: 10px;
    background-color: skyblue;
    padding: 0;
    list-style: none;
}

在locallibrary\catalog\templates\base_generic.html：

<!DOCTYPE html>
<head>

{% block title %}<title>Test</title>{% endblock %}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

{% load static %}
<link rel="stylesheet" href="{% static 'css/styles.css' %}">

</head>

<body>

  <div class="container-fluid">

    <div class="row">
      <div class="col-sm-2">
      {% block sidebar %}
      <div class="sidebar-nav">
          {% if user.is_authenticated %}
          <li>User: {{ user.get_username }}</li>

          <li><a href="{% url 'logout'%}?next={{request.path}}">Logout</a></li>
          {% else %}
          <li><a href="{% url 'login'%}?next={{request.path}}">Login</a></li>
          {% endif %}
          <hr>

          <li><a href="{% url 'index' %}">Home</a></li>
          <li><a href="{% url 'books' %}">All books</a></li>
          <li><a href="{% url 'authors' %}">All authors</a></li>

          <hr>

          <li><a href="{% url 'trips' %}">Всі відрядження</a></li>
          <li><a href="{% url 'my-trips' %}">Мої відрядження</a></li>
          <li><a href="{% url 'trip_new' %}" class="top-menu"> Подати заявку на відрядження 
              <span class="glyphicon glyphicon-plus"></span></a></li>
          <li><a href="{% url 'search' %}" class="top-menu"> Пошук відряджень <span class="glyphicon glyphicon-plus"></span></a></li>
          <li><a href="{% url 'trip_my' %}">Всі відрядження2</a></li>


          <hr>

          <li><a href="{% url 'author_create' %}">Create author</a></li>
          <li><a href="{% url 'post_share' %}">Share this post</a></li>
          <li><a href="{% url 'export_users_csv' %}">Export all users</a></li>
          <li><a href="{% url 'attachment_email' %}">attachment email</a></li>
          <li><a href="{% url 'my-borrowed' %}">My Borrowed</a></li>




      </div>
     {% endblock %}
      </div>
      <div class="col-sm-10 ">
      {% block content %}{% endblock %}

          {% block pagination %}
             {% if is_paginated %}
                 <div class="pagination">
                     <span class="page-links">
                         {% if page_obj.has_previous %}
                             <a href="{{ request.path }}?page={{ page_obj.previous_page_number }}">previous</a>
                         {% endif %}
                     <span class="page-current">
                         Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
                     </span>
                     {% if page_obj.has_next %}
                         <a href="{{ request.path }}?page={{ page_obj.next_page_number }}">next</a>
                     {% endif %}
                      </span>
                 </div>
             {% endif %}
          {% endblock %}

      </div>
    </div>

  </div>
</body>
</html>

在locallibrary\locallibrary\settings.py：

STATIC_URL = '/static/'

标签： pythoncssdjangostatic

解决方案

推荐阅读