Question

首先，我想说我知道我的HTML不是最有效或最干净的。

我的问题是我写的自定义CSS根本不适用于我的网页。 Bootstrap似乎工作得非常好，但是当我尝试进行任何编辑或覆盖Bootstrap时，它只是平坦无效。我知道我的自定义CSS文件已正确链接，因为它与bootstrap.css在同一目录中

链接：

＆＃13;

<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>

＆＃13;

例如，我可以使用<style>元素更改面板的背景颜色：

＆＃13;

<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>

＆＃13;

但我无法使用外部CSS 更改面板的颜色（以下CSS片段在custom.css中）：

＆＃13;

.lukedbgcolor {
	background-color: #4286f4;
}

＆＃13;

<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>

＆＃13;

我已经尝试将CSS放在bootstrap.css的最底层，我也尝试将lukedbgcolor类放在第一位，如下所示： <div class="lukedbgcolor panel panel-default">

欢迎所有帮助/建议/批评，谢谢！

Answer 1

这是由于CSS的工作方式，它将根据样式的位置为样式提供某些优先级。在HTML（也称为内联样式）中定义的原因是因为它具有更高的优先级。使用多个样式表可能会导致问题，并且有各种解决方案。您可以使用关键字！important来赋予某种风格最高优先级。它通常是气馁的，因为它使得使用你的代码的其他人更难以理解为什么样式被改变，但如果它只是你自己，那么继续：

.lukedbgcolor {
background-color: #4286f4 !important;
}

Answer 2

使用Bootstrap的CDN暂时解决了这个问题，而不是在本地托管它。我认为更大的问题与缓存有关，可以通过以下方法修复<link href="XXX.css?v=1.0" rel="stylesheet" type="text/css" />

缓存修复程序由@mayersdesign提供

Answer 3

.panel.lukedbgcolor {
    background-color: #4286f4;
}

Answer 4

我不能（还）评论原帖。你是如何加载这个页面的？您是否在浏览器控制台中看到任何错误？上面的建议使用浏览器devtools并检查元素，查看该类是否存在，以及它是否被其他已定义的样式应用或覆盖将是接近它的方法。

您还希望在bootstrap.js之前加载jquery.js，因为bootstrap.js依赖于首先加载的jquery.js。浏览器控制台也会告诉你 - 这是一个非常有用的工具！

Answer 5

通常在CSS中，会考虑更具体的选择器。假设您有以下div：

<div id='myId' class='someClass'></div>

使用以下CSS：

.someClass{
  background-color:red;
}
#myId{
  background-color:blue;
}

div的背景颜色将为蓝色，因为它更具体。

引导程序可能提供比您更具体的选择器，因此可以覆盖它。

尝试在div中添加一个ID，看看它是否有所作为。（因为id是唯一的，所以它们具体而言）

自定义CSS不能使用Bootstrap

5 个答案: