设置体色，但div块有不同的颜色
设置体色，但div块有不同的颜色
提问于 2018-05-29 12:14:32
我在做一个项目。我想在身体上有相同的背景色，但是当我设置体色时，.container-fluid类的div会得到其他颜色。
我如何在这两种颜色上设置相同的颜色？
这里是我的代码：
body {
background-color: rgb(0, 223, 26);
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid" style="background-color:rgb(0,223,26)">
<div class="row">
<div class="offset-4 col-4 offset-4">
<div class="offset-1">
<h1 style="color:rgb(240,255,0)">Random Einstein's Quote Generator</h1>
</div>
<b><div class="randomquote" style="font-size:20px">
</div></b>
<div class="offset-3">
<button id="quotegenerator" style="font-size:14px" class="offset-1 col-4 offset-1 btn btn-primary">New Quote</button>
</div>
</div>
</div>
</div>
回答 5
Stack Overflow用户
回答已采纳
发布于 2018-05-29 12:39:25
body样式被引导CSS覆盖，它不接受您的颜色：
body {
background-color: rgb(0, 223, 26);
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<body>
BODY!
</body>
您可能需要在正文中直接添加一个div：
body > div {
background-color: rgb(0, 223, 26);
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div><!-- Added here -->
<div class="container-fluid"><!-- Removed inline CSS here -->
<div class="row">
<div class="offset-4 col-4 offset-4">
<div class="offset-1">
<h1 style="color:rgb(240,255,0)">Random Einstein's Quote Generator</h1>
</div>
<b><div class="randomquote" style="font-size:20px">
</div></b>
<div class="offset-3">
<button id="quotegenerator" style="font-size:14px" class="offset-1 col-4 offset-1 btn btn-primary">New Quote</button>
</div>
</div>
</div>
</div>
</div><!-- Added here -->
<body>
希望能帮上忙。
Stack Overflow用户
发布于 2018-05-29 12:39:00
您的问题在于您正在导入的引导css文件。它覆盖了你的身体css。
你的解决办法是给你的身体一个自己的身份。
<body id="idForOverrides">然后，您为该id所做的任何css更改都将覆盖引导程序的定义。
在这里了解更多：
Stack Overflow用户
发布于 2018-05-29 14:11:05
这是它的代码：
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body style="background-color: green">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid" >
<div class="row">
<div class="offset-4 col-4 offset-4">
<div class="offset-1">
<h1 style="color:rgb(240,255,0)">Random Einstein's Quote Generator</h1>
</div>
<b><div class="randomquote" style="font-size:20px">
</div></b>
<div class="offset-3">
<button id="quotegenerator" style="font-size:14px" class="offset-1 col-4 offset-1 btn btn-primary">New Quote</button>
</div>
</div>
</div>
</div>
<script src="" async defer></script>
</body>
</html>
你可以检查一下小提琴：https://jsfiddle.net/nnfoy6pw/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50584155
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号