Question

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

{% 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;
}

原因是什么？

Answer 1

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

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

覆盖Bootstrap不会立即生效

1 个答案: