引导烧瓶自定义CSS未显示，浏览器缓存问题_Css_Twitter Bootstrap_Flask

引导烧瓶自定义CSS未显示，浏览器缓存问题

css twitter-bootstrap flask

引导烧瓶自定义CSS未显示，浏览器缓存问题,css,twitter-bootstrap,flask,Css,Twitter Bootstrap,Flask,我已经检查了其他问题和我的源代码教程，但我仍然无法获得我的Flask Boostrap应用程序。来获取我的自定义CSS文件从base.jinja2 HTML模板文件： {% include 'html_dependencies.jinja2' %} </head> <body> （这是测试文件，正文当前没有变为黄色，因此我的CSS似乎没有加载..我真的不想在任何样式的情况下使用黄色背景！）完整的HTML依赖文件下面的代码，这是加载主引导文件罚款，我的自定义

我已经检查了其他问题和我的源代码教程，但我仍然无法获得我的Flask Boostrap应用程序。来获取我的自定义CSS文件

从base.jinja2 HTML模板文件：

    {% include 'html_dependencies.jinja2' %}

</head>
<body>

（这是测试文件，正文当前没有变为黄色，因此我的CSS似乎没有加载..我真的不想在任何样式的情况下使用黄色背景！）

完整的HTML依赖文件下面的代码，这是加载主引导文件罚款，我的自定义CSS是最后一个文件，与url_的和静态格式语法，因为我理解应该是正确的。可能是我的顺序错了，或者是某个引导文件干扰了我？另外，当窗口最小化时，引导折叠导航菜单不起作用，我不确定这是否是同一原因，当窗口低于截止宽度时，标准框中的线条图标显示用于导航，但当我单击它时，什么也没有发生

<!-- Latest versions available at 31-8-17 -->

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<!-- link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" -->

<!--Font Awesome from https://www.bootstrapcdn.com/fontawesome/ on 31/8/17 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<!--Flatly theme from bootstrapcdn.com on 31/8/17 -->
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet" integrity="sha384-+ENW/yibaokMnme+vBLnHMphUYxHs34h9lpdbSLuAwGkOKFRl4C34WkjazBtb7eT" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- do I need jquery as well for the pop-up to work? Maybe already in the JS import -->

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- custom changes / over-rides to Boostrap CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">

我是个新手，任何建议都很感激。

我发现问题出在浏览器缓存上。在服务器上，这段代码对我来说很好。在我的本地计算机上的IE和Chrome中，如果我更改自定义CSS代码，它不会拾取它，除非我在浏览器中打开“代码检查器”，单击“代码检查器”中的“禁用缓存”选项，并保持“代码检查器”窗口仍然打开，然后重新加载本地主机网站。下面的问题最终解决了我的问题，现在我正在下载Chrome扩展缓存杀手，按照这里的第二个答案，否则，必须打开窗口并禁用缓存来检查自定义CSS中的每一个更改，这是非常令人恼火的

我还修复了前面提到的折叠菜单问题的其他错误，原因是Bootstrap jQuery导入行位于Bootstrap min.js文件下面。在浏览器中打开代码检查显示此错误，所以将jQuery行移到js行上方，并正确加载

再次感谢@senaps为我指明了正确的方向，向我确认发布的代码本身似乎是正确的。

再次感谢@senaps为我指出了正确的方向，向我证实了发布的代码本身似乎是正确的。

您的css和标签是否符合您的风格？也许你的css失败了，或者没有任何对象可供设计？谢谢@senaps这个网站正在CentOS Linux上运行。我的答案的顶部是base.jinja2文件的代码摘录，该文件是HTML基本模板文件。我认为完整的基础模板可能与包含无关。这是所有运行和显示引导CSS，但由于某些原因，它没有拿起我的自定义CSS文件。我显示的CSS主体代码是整个自定义CSS文件，将

style=“background color:yellow”

内联放入主体标记中是有效的，但将其放入我的自定义CSS文件当前不会：-（你看，我想说的一点是，如果一切正常，那么你开始检查路径是否正确！css/stryle.css是否被正确拾取？是的，你的静态文件可能也包含其他自定义文件，它们是否正常？（静态中的js和模板文件）唯一有问题的文件是

style.css

？您应该能够使用浏览器检查您的文件是否正在加载。如果根本没有加载，.css文件上应该有404错误。我想这也是@senaps试图传达的内容。谢谢@BrettJ，我想根据下面的答案，您的css和标签在您的内部吗r你的样式正确吗？可能你的css失败了，或者没有可以样式化的对象？谢谢@senaps这个网站正在CentOS Linux上运行并在线运行。我的答案是base.jinja2文件的代码摘录，这是HTML基本模板文件。我想完整的基本模板可能与包含内容无关。这都是在运行和修改我正在播放引导CSS，但由于某些原因，它没有拾取我的自定义CSS文件。我所显示的CSS主体代码是整个自定义CSS文件，将

style=“background color:yellow”

内联放入主体标记可以工作，但将其放入我的自定义CSS文件当前不会：-（你看，我想说的一点是，如果一切正常，那么你开始检查路径是否正确！css/stryle.css是否被正确拾取？是的，你的静态文件可能也包含其他自定义文件，它们是否正常？（静态中的js和模板文件）唯一有问题的文件是

style.css

？您应该能够使用浏览器检查您的文件是否正在加载。如果根本没有加载，.css文件上应该有404错误。我想这也是@senaps试图传达的内容。谢谢@BrettJ，我想根据下面的回答，现在已经修复了。很高兴您能让它工作，所以fru当它是代码之外的一个简单问题时分层。很高兴你让它工作了，当它是代码之外的一个简单问题时，那么令人沮丧。

<!-- Latest versions available at 31-8-17 -->

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<!-- link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" -->

<!--Font Awesome from https://www.bootstrapcdn.com/fontawesome/ on 31/8/17 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<!--Flatly theme from bootstrapcdn.com on 31/8/17 -->
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet" integrity="sha384-+ENW/yibaokMnme+vBLnHMphUYxHs34h9lpdbSLuAwGkOKFRl4C34WkjazBtb7eT" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- do I need jquery as well for the pop-up to work? Maybe already in the JS import -->

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- custom changes / over-rides to Boostrap CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">