覆盖Bootstrap不会立即生效

这一直困扰着我，我的自定义CSS并不总是立即生效。例如，我正在尝试移动我的form和submit按钮，试图让它们对齐，并且所有工作都正常，直到我的笔记本电脑进入睡眠状态。我回来了，它不会立即更新。然后，我不得不离开我的房子，所以我把它放回了睡眠，当我回来并刷新我的网站（本地主机）时，所做的更改都已应用。这里是我的模板代码：覆盖Bootstrap不会立即生效

{% load staticfiles %} 

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title>Bootstrap 101 Template</title> 

    <!-- Bootstrap --> 
    <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/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 


    <link rel="stylesheet" href="{% static 'css/bootstrap-theme.css' %}"> 
    <link rel="stylesheet" href="{% static 'css/bootstrap-override.css' %}"> 
    <script src="{% static 'js/bootstrap.min.js' %}"></script> 



    </head> 
    <body> 
    <nav class="navbar navbar-inverse navbar-static-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">About</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Design</a></li> 
         <li><a href="#">Development</a></li> 
         <li><a href="#">Consulting</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
      <form method="POST" class= "post-form navbar-form"> {% csrf_token%} 
      {{ form.as_p }} 
      <button type='submit' class="save btn-default">Submit</button> 
     </form> 
     </div> 

    </div> 
</nav> 



<div class="container"> 
    <div class ="row"> 
     <div class ="col-md-12"> 


     </div> 

    </div> 
    <div class="row"> 
     <div class="col-md-4"> 
      <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span> 
      <h3>Personal Training</h3> 
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p> 
     </div> 
     <div class="col-md-4"> 
      <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span> 
      <h3>Physiotherapy</h3> 
      <p>Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Lorem ipsum dolor.</p> 
     </div> 
     <div class="col-md-4"> 
      <span class="glyphicon glyphicon-console" aria-hidden="true"></span> 
      <h3>Boxing</h3> 
      <p>Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p> 
     </div> 

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

，这里是我的自定义CSS文件：

.navbar { 
    margin-bottom: 500px; 
} 

.save-btn-default { 
    position: relative;left:425px;top:-47px; 
} 

.post-form { 
    position: relative;right:275px;top:-30px; 
}

当时原因造成的？

来源

2016-12-28 Amon

为什么要添加'bootstrap.min.js'和'jquery.min.js'两次？并确保您的自定义样式表应该是最后一个。 –

我认为我正在关注两个教程，并最终将它们都放入了。我编辑了代码以排除'jquery.min.js'，并将我的自定义CSS放置在默认主题下。似乎现在已经工作 – Amon

@MuhammadUsman好了，所以问题似乎又出现了。这是服务器的东西吗？是否有一些功能可以防止它每次都立即更新？我编辑了我的代码，告诉你我改变了它。当我检查元素时，它只是显示我给出的规格没有改变。 – Amon

1）在这里您添加了两次bootstrap.min.js和jquery.min.js。

2）最好在关闭head标签之前编写自定义css。

来源

2016-12-28 06:00:34

谢谢你，似乎已经做到了。那么我应该把自定义样式表放在'jquery.min.js'行之后吗？我把它放在它之前，它正在工作 – Amon

覆盖Bootstrap不会立即生效

回答

相关问题