我在使用 bootstrap 和 css3 时遇到了一些问题。这是我的代码:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portfolio</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript"></script>
<style type="text/css">
body {
background: linear-gradient(132deg, #ec5218, #1665c1);
background-size: 400% 400%;
animation: BackgroundGradient 30s ease infinite;
}
@keyframes BackgroundGradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
h1 {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
font-family: Open Sans, sans-serif;
color: #fff;
font-weight: 400;
text-transform: uppercase;
text-align: center;
font-size: 2em;
background-color: #000;
padding: 5px;
}
</style>
</head>
<body>
<h1>Mitchell Smith</h1>
<div class="container"></div>
</body>
</html>现在是问题所在，所以使用这段代码一切正常，我的 body 有一个渐变背景并且一切正常。现在，当我使用
链接 Bootstrap 时 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
我所有的 CSS 都消失了。有人可以帮我解决这个问题吗？
最佳答案
让您理解问题:每个元素的最后一个 css 规则是实际应用的那个。如果您之前链接其他 css 文件，您的个人代码将覆盖另一个。 此外，如果您对单个样式表中的元素有多个规则，则只会应用最底部的规则。 (如果它们具有相同的目标属性)
关于jquery - CSS3 不适用于 Bootstrap，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46084985/