CSS3不能与Bootstrap一起使用 [英] CSS3 not working with Bootstrap
问题描述
我遇到了bootstrap和css3的一些问题。这里是我的代码：
< html>< head> < meta charset =utf-8> < meta name =viewportcontent =width = device-width，initial-scale = 1> <标题>组合与LT; /标题> < 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：线性渐变（132deg，＃ec5218，＃1665c1）;背景大小：400％400％;动画：BackgroundGradient 30s轻松无限; } @keyframes BackgroundGradient {0％{background-position：0％50％;} } 50％{background-position：100％50％; } 100％{background-position：0％50％; }} h1 {position：absolute;剩下：50％;顶部：50％; transform：translateX（-50％）translateY（-50％）; font-family：Open Sans，sans-serif;颜色：#fff; font-weight：400;文字转换：大写; text-align：center; font-size：2em; background-color：＃000;填充：5px; }< / style>< / head>< body> < h1> Mitchell Smith< / h1> < div class =container>< / div>< / body>< / html>
现在的问题，所以这块代码一切正常，我的身体有一个渐变的背景，一切正常。现在，当我使用
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/链接引导程序3.3.7 / css / bootstrap.min.css>
我的所有CSS都消失了。有人可以帮我解决这个问题吗？
为了解这个问题：每个项目的最后一条css规则是这实际上是应用的。如果您之前链接了其他css文件，您的个人代码会覆盖另一个文件。
另外，如果您对单个样式表中的项目有多个规则，则仅应用最底部的一个。 （如果它们具有相同的属性）
I ran into a bit of a problem with bootstrap and css3. Here's my code:
<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>
Now the problem, so with this block of code everything works fine, my body has a gradient background and everything is working. Now when I link bootstrap using
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
all of my css goes away. Could someone help me out with this?
For you to understand the problem: The last css rule for each items is the one that is actually applied. If you link the other css files before, your individual code would overwrite the other. Also if you have multiple rules for an items in a single Stylesheet, only the most bottom one is applied. (If they have the same attribute targeted)
这篇关于CSS3不能与Bootstrap一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
