python - 覆盖 Bootstrap 不会立即生效-6ren

python - 覆盖 Bootstrap 不会立即生效

转载作者：太空宇宙更新时间：2023-11-03 15:59:18

26

4

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

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

这是什么原因？

最佳答案

1) here you added bootstrap.min.js and jquery.min.js two times.

2) better to write your custom css before closing the head tag.

关于python - 覆盖 Bootstrap 不会立即生效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41356139/

26

4

0

文章推荐： python - 重新采样 Pandas 列日期时间

文章推荐： javascript - 我如何使用提交另一个表单的javascript提交表单

文章推荐： php - 安全 header 无效 - 1002

文章推荐： python - Pandas :在没有行的地方添加零值(稀疏)

javascript - 样式更改未使用 javascript 生效
我希望在通过 POST 方法发送数据后文本框消失。但我无法让 Javascript 工作。页面不断重新加载，因此文本框始终存在。 function puff() { if (document.get
bash - 无法让 expand_aliases 生效
我无法让 expand_aliases 在 bash 中生效。我尝试了很多不同的方法，但没有任何效果。这是一个简单的测试用例: /bin/bash -c 'shopt -s expand_alias
c - 如何检测extern "C"生效
我正在尝试查找 #include 位于 extern C block 内的所有位置。是否可以使用预处理器进行检查？我想在我的头文件中添加类似这样的内容: #ifdef EXTERN_C_IS_IN_E
ios - UIAppearance 未对以编程方式创建的 UILabel 生效
我们扩展了 UILabel，以便能够为我们应用程序中给定标签类型的所有用途应用标准字体和颜色。例如。 @interface UILabelHeadingBold : UILabel @end 在我们的
vuetify.js - Vuetify - CSS 在组件内不起作用(生效)
案例1 我们正在尝试将自定义样式应用于渲染的 vuetify 元素: .input-group__input { background: red; } 但是没有任何变化。案
symfony1 - 更新后 symfony sfGuardUser hasCredential 生效
我正在使用 symfony 1.4 和 sfGuardDoctrinePlugin，我已经安装并设置好了，但我遇到以下问题: 如果我以管理员身份登录并更新用户的权限，该用户必须注销然后重新登录才能获得
javascript - 是否可以像 getElementsByTagName 一样让 querySelectorAll 生效？
getElementsByTagName() 有 2 个很棒的特性:速度快且实时。但是，如果我想获得 p strong 怎么办。当然，我可以再次使用 getElementsByTagName() 优化
python - 如何使单元测试模拟代码对每个 spark worker 节点(进程)生效
我有三个文件: spark_mock_dependency.py 提供了一个user() 方法来读取/etc/user， spark_mock.py 用于创建一个 Env 类，它使用 user() 方
linux-kernel - 简单的 eBPF 操作不会对 tc 生效
我从 samples/bpf/pare_simple.c(来自 Linux 内核树)编译了 BPF 示例，做了非常简单的更改: SEC("simple") int handle_ingress(str
html - 我怎样才能使
展开以便它的 `padding-right` 生效？
我有一个基本的树结构。容器可以水平滚动。我在所有上都有正确的填充元素。但是，正确的填充没有生效。我该如何修复它才能生效？ ul { height: 100%; margin: 0; p
ruby-on-rails - Assets 管道 - 无法让我的 CSS 生效
我目前在使用 Ruby on Rails 上的 Assets 管道时遇到了一些问题。我正在使用电子商务解决方案 (Spree)，在文档中，文档中有这个: [...] you can improve
如果周期性 $rootScope.$digest 生效，AngularJS $http.post 响应激活得更快
在我们非常庞大且非常复杂的 AngularJS 应用程序中，我注意到(偶然!)我的主模块设置中有这样一行... application.run(function($rootScope) { w
android - Activity 覆盖 getResources() 后，如何对下一个运行的 Activity 生效？
我发现重写getResources()后app第一次运行的activity也会对后面运行的activity生效，前提是你的手机字体特别大。例如:执行以下步骤将手机字体设置为巨无霸创建两个名为 A
ios - 为什么在页面 View Controller 中使用 KVO 进行观察时应用程序崩溃？以及如何使 KVO 生效？
我正在尝试使用 KVO 来观察在我的页面 View Controller 的子内容 View Controller 的 ScrollView 中使用拖动时的更新变化，但是当应用程序启动时，它崩溃了说:

首页

博学

6Ren·AI

商城

python - 覆盖 Bootstrap 不会立即生效