自定义CSS不适用于Bootstrap [英] Custom CSS Won't Work With Bootstrap
问题描述
首先，我想说我知道我不是HTML中效率最高或最干净的。
我的问题是我写的自定义CSS根本不适用于我的网页。 Bootstrap似乎工作得很好，但是当我尝试进行任何编辑或覆盖Bootstrap时，它只是平坦不起作用。我知道我的自定义CSS文件链接正确，因为它与bootstrap.css位于同一目录中
链接：
< head>< title>帮助菜单< / title><！ - ========= ================================================== ================================================== =参考（BOOTSTRAP 3.3.7）（jQuery 3.1.1）==================================== ================================================== ======================== - >< link href =/ bootstrap / css / bootstrap.css =stylesheet> < link href =/ bootstrap / css / custom.css =stylesheet>< script src =/ bootstrap / js / bootstrap.js>< / script>< script src = /bootstrap/js/npm.js\"></script><script src =/ jquery / jquery.js>< / script><！ - ========= ========================= ================================================== ========================== BOOTSTRAP REFERENCES DISTRO 3.3.7 ================== ================================================== ========================================== - >< /头> ;
例如，我可以更改背景颜色 元素： data-hide =falsedata-console =truedata-babel =false>
< div class =container> < div style =background-color：＃4286f4; class =panel panel-default> < div class =panel-heading>< h1>您需要哪些帮助？< / h1>< / div> < p为H. < div class =row> < div class =col-sm-2> < / DIV> < div class =col-sm-2>常见问题< / div> < / DIV> < div class =row> < div class =col-sm-2> < / DIV> < div class =col-sm-2>打印机和LT; / DIV> < / DIV> < div class =row> < div class =col-sm-2> < / DIV> < div class =col-sm-2>驱动器和LT; / DIV> < / DIV> < / p为H. < / div>< / div>
使用外部CSS 更改面板的颜色（以下CSS代码片段位于custom.css中）：
$ b
$ b
.lukedbgcolor {background-color：＃4286f4;}
< div class =container> < div class =panel panel-default lukedbgcolor> < div class =panel-heading>< h1>您需要哪些帮助？< / h1>< / div> < p为H. < div class =row> < div class =col-sm-2> < / DIV> < div class =col-sm-2>常见问题< / div> < / DIV> < div class =row> < div class =col-sm-2> < / DIV> < div class =col-sm-2>打印机和LT; / DIV> < / DIV> < div class =row> < div class =col-sm-2> < / DIV> < div class =col-sm-2>驱动器和LT; / DIV> < / DIV> < / p为H. < / div>< / div>
把CSS放在bootstrap.css的最底部，我也试着把 lukedbgcolor 类放在第一个像这样：
< div class =lukedbgcolor panel panel-default>
欢迎所有帮助/建议/批评，
谢谢！ / p>
通过使用Bootstrap的CDN临时解决了问题，而不是在本地托管它。我相信更大的问题与缓存有关，可以通过以下方式来解决：< link href =XXX.css？v = 1.0 =stylesheettype =text / css />
@mayersdesign缓存修复程序
First off I would like to say that I know I am not the most efficient or clean in my HTML.
My problem is that the custom CSS I write does not apply to my webpage at all. Bootstrap seems to be working perfectly fine, but when I try to make any edits or overwrite Bootstrap it just flat out doesn't work. I know that my custom CSS file is linked properly because it's in the same directory as bootstrap.css
Linking:
<head>
<title>Help Menu</title>
<!--
==============================================================================================================
REFERENCES (BOOTSTRAP 3.3.7) (jQuery 3.1.1)
==============================================================================================================
-->
<link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/bootstrap/css/custom.css" rel="stylesheet" >
<script src="/bootstrap/js/bootstrap.js"></script>
<script src="/bootstrap/js/npm.js"></script>
<script src="/jquery/jquery.js"></script>
<!--
==============================================================================================================
BOOTSTRAP REFERENCES DISTRO 3.3.7
==============================================================================================================
-->
</head>
For example I am able to change the background color of the panel using the <style> element:
<div class="container">
<div style="background-color: #4286f4;" class="panel panel-default">
<div class="panel-heading"><h1>What Do You Need Help With?</h1></div>
<p>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Frequent Problems
</div>
</div>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Printers
</div>
</div>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Drivers
</div>
</div>
</p>
</div>
</div>
But I cant change the color of the panel using external CSS (the following CSS snippet is in custom.css):
.lukedbgcolor {
background-color: #4286f4;
}
<div class="container">
<div class="panel panel-default lukedbgcolor">
<div class="panel-heading"><h1>What Do You Need Help With?</h1></div>
<p>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Frequent Problems
</div>
</div>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Printers
</div>
</div>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Drivers
</div>
</div>
</p>
</div>
</div>
I have tried putting the CSS at the very bottom of the bootstrap.css and I have also tried putting the lukedbgcolor class first like this:
<div class="lukedbgcolor panel panel-default">
ALL help / advice / criticism is welcomed, Thanks!
The issue was temporarily fixed by using Bootstrap's CDN instead of hosting it locally. I believe the larger problem had to do with caching which can be fixed by the following, <link href="XXX.css?v=1.0" rel="stylesheet" type="text/css" />
Cache fix courtesy of @mayersdesign
这篇关于自定义CSS不适用于Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
