无法改变身体的背景颜色

时间：2017-03-05 07:44:50

标签： html css twitter-bootstrap

我为一个简单的单页应用程序编写了代码。我想将背景颜色（不包括navbar＆amp; jumbotron）从默认白色更改为其他颜色。我无法在css表中覆盖白色。

rate.html

＆＃13;
＆＃13; 
 body
    {
    	background:#2c3e50;
    }
＆＃13; 
<html>
        <head>
        	<title></title>
        	<link rel="stylesheet" type="text/css" href="effects.css">
        	<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://code.jquery.com/jquery-3.1.1.min.js"
          integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
          crossorigin="anonymous"></script>
         
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        
        
        </head>
        <body>
        
        	<nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#"><div class="glyphicon glyphicon-pencil"></div>
        Rate Gitam</a>
            </div>
            <p class="navbar-text">Gitam university's first rating site</p>
        	</div><!-- /.navbar-collapse -->
        	</nav>
        	<div class="jumbotron">
        		<h1>Rate your professor</h1>
        		<p>Rate your professor and choice of your elective on a five point scale</p>
        		
        	</div>
        	<div class="col">	
        	<form class="form-horizontal ">
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Faculty Name</label>
            <div class="col-lg-3">
              <input type="text" class="form-control" id="inputEmail3" placeholder=" Faculty Name">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">rating</label>
            <div class="col-lg-3">
              <input type="text" class="form-control" id="inputPassword3" placeholder="Rating">
            </div>
          </div>
        
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default">Submit</button>
            </div>
          </div>
        </form>
        </div>
        
        </body>
        </html>
＆＃13;
＆＃13;
＆＃13;

6 个答案:

答案 0 :(得分：1)

总是将css包含在所有其他样式的末尾。

<head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="effects.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="css/style.css"> <!-- your custom stylesheet. you should create this stylesheet and add your styles here -->


        <script
      src="https://code.jquery.com/jquery-3.1.1.min.js"
      integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
      crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


    </head>

我也编辑了你的代码片段

 body
    {
    	background:#2c3e50;
    }
<html>
        <head>
        	<title></title>
        	
        	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="effects.css"> <!-- if this is your stylesheet, use it here. if not, use your stylesheet here like i mentioned above -->
        
        
        	<script
          src="https://code.jquery.com/jquery-3.1.1.min.js"
          integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
          crossorigin="anonymous"></script>
         
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        
        
        </head>
        <body>
        
        	<nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#"><div class="glyphicon glyphicon-pencil"></div>
        Rate Gitam</a>
            </div>
            <p class="navbar-text">Gitam university's first rating site</p>
        	</div><!-- /.navbar-collapse -->
        	</nav>
        	<div class="jumbotron">
        		<h1>Rate your professor</h1>
        		<p>Rate your professor and choice of your elective on a five point scale</p>
        		
        	</div>
        	<div class="col">	
        	<form class="form-horizontal ">
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Faculty Name</label>
            <div class="col-lg-3">
              <input type="text" class="form-control" id="inputEmail3" placeholder=" Faculty Name">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">rating</label>
            <div class="col-lg-3">
              <input type="text" class="form-control" id="inputPassword3" placeholder="Rating">
            </div>
          </div>
        
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default">Submit</button>
            </div>
          </div>
        </form>
        </div>
        
        </body>
        </html>

答案 1 :(得分：1)

默认情况下，bootstrap css将白色作为主体背景颜色，因此为了更改它，您需要覆盖它...这样 - 

<style type="text/css">
 body { background: navy !important; } 
 </style>

但不建议使用!important。 所以试着考虑下面的方法 -

您应始终将代码包装在容器或容器内。 当你想为身体添加背景颜色时，请将所有内容包裹在class="container-fluid"中。风格吧。

如果您不想将背景颜色用于jumbotron，请使用class="row"中的colr。

您的HTML标记中也存在一些基本问题。您的列应始终位于class="row"。

下

＆＃13;
＆＃13; 
.container-fluid
    {
    	background-color: #2c3e50;
    }
＆＃13; 
<html>
        <head>
        	<title></title>
        	
        	<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://code.jquery.com/jquery-3.1.1.min.js"
          integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
          crossorigin="anonymous"></script>
         
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        
        
        </head>
        <body id="bdy">
        
        	<nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#"><div class="glyphicon glyphicon-pencil"></div>
        Rate Gitam</a>
            </div>
            <p class="navbar-text">Gitam university's first rating site</p>
        	</div><!-- /.navbar-collapse -->
        	</nav>
          <div class="container-fluid">
        	<div class="jumbotron">
        		<h1>Rate your professor</h1>
        		<p>Rate your professor and choice of your elective on a five point scale</p>
        		
        	</div>
          <div class="row">
        	<div class="col">	
        	<form class="form-horizontal ">
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Faculty Name</label>
            <div class="col-lg-3">
              <input type="text" class="form-control" id="inputEmail3" placeholder=" Faculty Name">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">rating</label>
            <div class="col-lg-3">
              <input type="text" class="form-control" id="inputPassword3" placeholder="Rating">
            </div>
          </div>
        
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default">Submit</button>
            </div>
          </div>
        </form>
        </div>
        </div>
        </div>
        </body>
        </html>
＆＃13;
＆＃13;
＆＃13;

注意

其中一个答案说你应该在引导程序之后总是包含你的样式表，这也是你应该考虑的另一件事。

希望这有帮助！

答案 2 :(得分：1)

使用!important标志覆盖新行为的先前css行为。在片段下面运行：

time.Duration
d := 73.5
s := time.Duration(float64(time.Hour) / d)

所有的优点。

编辑：或者在bootstrap或任何库旁边包含您的css样式表文件。 （在头尾）

答案 3 :(得分：0)

只需在bootstrap css文件后的head部分添加额外的css 

<style>
    body {
        background-color: <colorCode>
    }
</style>

答案 4 :(得分：0)

您需要在其他css文件之后添加您的样式，以便它们不会覆盖您写的任何内容。

在

之前添加此功能 
<style>
    body {
        background-color: #yourcolor
    }
</style>

答案 5 :(得分：0)

两个不同的CSS选择器告诉背景颜色。因为背景颜色被引导程序中的以下css覆盖。你可以通过在body标签中添加白色来解决这个问题。

<body style="background-color:#2c3e50;">

检查一下：Specifics on CSS Specificity

相关问题
最新问题