Question

我最近有类似远程类似的问题，我的自定义CSS根本不起作用：Custom CSS Won't Work With Bootstrap

我通过外部引用bootstrap（使用CDN）修复了这个问题，并且我能够完美地使用我自己的CSS。

就在今天，我试图更改元素的文本大小，它只在我像以前一样使用<style>元素时才起作用。当我删除bootstrap的链接时，bootstrap元素继续工作（下例中的面板）

/* Menu Box */
.textcenter {
	text-align: center;
}

.panelcolors {
	background-color: #6fa1f2;
	border-color: #6fa1f2;
}

#panelhcolors {
	background-color: #6394e2;
	border-color: #6394e2;
	color: #f7f7f7;
}

.paneltext {
	color: #f7f7f7;
}


/* Menu Box */


/* BG CYCLER */
#background_cycler {
	padding:0;
	margin:0;
	width:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:-1
}

#background_cycler img {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	z-index:1
	background-size: cover;
	background-position: center;
}

#background_cycler img.active {
	z-index:3
}
/* BG CYCLER */

<!DOCTYPE html>

<html>

<head>

<title>Help Menu</title>

<!--
==============================================================================================================

REFERENCES (BOOTSTRAP 3.3.7) (jQuery 3.1.1)

==============================================================================================================
-->

<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> -->
<link rel="stylesheet" href="/custom/style.css">
<script src="/custom/programming.js"></script>

<!--
==============================================================================================================

BOOTSTRAP REFERENCES DISTRO 3.3.7

==============================================================================================================
-->

</head>

<body>

<!-- BACKGROUND -->
<div id="background_cycler" >

<script>
$('#background_cycler').hide();//hide the background while the images load, ready to fade in later
</script>

<img class="active" src="/images/background/bg_1.jpg" alt=""/>
<img src="/images/background/bg_2.jpg" alt=""   />
<img src="/images/background/bg_3.jpg" alt=""  />
<img src="/images/background/bg_4.jpg" alt=""/>		
<img src="/images/background/bg_5.jpg" alt=""  />
</div>

<!-- HOME BUTTON -->

<br>
<br>
<div>
	<br>
	<center>
			<button type="button" class="btn btn-info btn-circle btn-lg"><i class="glyphicon glyphicon-home"></i></button> <br>
	</center>
</div> <br>
<br>
<br>
<br>
<br>
<div style="max-width: 50%;" class="container">
	<div class="panel panel-default panelcolors">
		<div id="panelhcolors" class="panel-heading"><h1 class="textcenter">What Do You Need Help With?<br> WORK IN PROGRESS</h1></div>
<br>
			<p>
				<div class="textcenter paneltext">
					<div>
						<a href="/main/fp.html">Frequent Problems</a>
					</div>
<br>
					<div>
						Printers
					</div>
<br>
					<div>
						Drivers
					</div>
<br>
				</div>
			</p>
	</div>
</div>


</body>
</html>

为了进一步测试我注释掉了我自定义CSS的链接，面板和一切都消失了（我的自定义CSS中没有任何东西与除了颜色之外的面板的存在有关）。

我已将自定义CSS的链接添加回HTML，一切看起来都很正常。然后我完全从服务器中删除了我的自定义CSS文件，网站上的任何内容都没有改变。当没有任何内容被注释掉时，对我的自定义CSS文件的编辑根本不会产生任何影响（即使它们是在我昨天离开工作之前做的）。

知道可能出现什么问题吗？

Answer 1

这听起来像是一个缓存问题。尝试像这样对你的CSS进行版本控制：

<link href="/custom/style.css?v=1.0" rel="stylesheet" type="text/css" />

？v = 1.0将＆＃34;胸围＆＃34;浏览器（或服务器端）缓存，您将确信您正在查看最新的代码。

当你获得自信时，这是一个可爱的伎俩与PHP到＃34;自动版＆＃34;你的css：

<?php $base_dir  = __DIR__;?>
<link href="/custom/style.css?v=<?php echo filemtime($base_dir."/custom/style.css")?>" rel="stylesheet" type="text/css" />

...获取CSS文件的制作时间，并将该时间作为版本附加。

Answer 2

问题是，在更新css后，Chrome未更新缓存，ctrl + f5允许更改显示。

Bootstrap / CSS的奇怪问题

2 个答案: