添加“extends/base.html”后，某些 CSS 无法正常工作

Question

I am building a toggle button and i am using some CSS but when i try to run code then one CSS command is not working.我正在构建一个toggle button ，我正在使用一些CSS但是当我尝试运行代码时， one CSS command不起作用。 When i remove {% extends 'base.html' %} then it works perfectly but after adding it doesn't load a function.当我删除{% extends 'base.html' %}时，它可以正常工作，但添加后它不会加载 function。

toggle.html切换.html

{% extends 'mains/base.html' %}
{% load static %}
{% block content %}

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
  @media screen and (max-width: 700px) {
    body {
      padding: 170px 0 0 0;
      width: 100%
    }
  }
  
  a {
    color: inherit;
  }
  
  .menu-item,
  .menu-open-button {
    background: #EEEEEE;
    border-radius: 100%;
    width: 80px;
    height: 80px;
    margin-left: -35px;
    margin-top: 230px;
    position: absolute;
    color: #FFFFFF;
    text-align: center;
    line-height: 3em;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform ease-out 200ms;
    transition: -webkit-transform ease-out 200ms;
    transition: transform ease-out 200ms;
    transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
  }
</style>

base.html底座.html

{% load static %}


Other links.......

.......

......

{% block content %}
{% endblock %}

line-height: 100px; is not working after adding extends base.html , which is necessary.添加extends base.html后不起作用，这是必要的。

I have searched everywhere, and I have also tried by deleting every element on base.html , then I notice that after deleting every single link it is working.我到处搜索，我还尝试删除base.html上的每个元素，然后我注意到在删除每个链接后它正在工作。

Any help would be much appreciated.任何帮助将非常感激。 Thank you in advance.先感谢您。

Answer 1

There is an CSS that override your CSS, make sure that link to your CSS is the last in base.htnl.有一个 CSS 覆盖了您的 CSS，请确保指向您的 CSS 的链接是 base.htnl 中的最后一个。

In your 'base.html' add a block called 'head' between '' and '< /head> and your style tag to it.在您的“base.html”中，在“”和“< /head>”之间添加一个名为“head”的块，并将您的样式标签添加到其中。

CSS can be only applied in HEAD not in body like JS CSS 只能应用于 HEAD 而不是像 JS 这样的 body

Answer 2

I added this in base.html :-我在base.html中添加了这个：-


<!DOCTYPE html>
<html>
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    </head>
<body>

AND It Worked它奏效了

添加“extends/base.html”后，某些 CSS 无法正常工作

问题描述

2 个解决方案

解决方案1
0 已采纳 2021-06-07 16:30:36

解决方案2
0 2021-06-07 17:33:01

添加“extends/base.html”后，某些 CSS 无法正常工作

问题描述

2 个解决方案

解决方案1 0 已采纳 2021-06-07 16:30:36

解决方案2 0 2021-06-07 17:33:01

解决方案1
0 已采纳 2021-06-07 16:30:36

解决方案2
0 2021-06-07 17:33:01