Jumbotron的颜色和背景不会改变

问题描述：

试图改变我的jumbotron的背景和颜色，没有任何反应。 padding工程，但background没有。Jumbotron的颜色和背景不会改变

我的CSS：

.jumbotron { 
    padding:70px 30px 70px 30px; 
    margin:0px auto; 
    background: #7986CB ; 
    color:blue; 
} 

.row-header{ 
    margin:0px auto; 
    padding:0px auto; 
}

我<body>：

<header class="jumbotron"> 
     <div class="container"> 
      <div class="row row-header"> 
       <div class="col-xs-12 col-sm-8"> 
        <h1>Header</h1> 
        <p style="padding:40px;"></p> 
        <p>bla bla</p> 
       </div> 
       <div class="col-xs-12 col-sm-4"> 
       </div> 
      </div> 
     </div> 
    </header>

为什么不会在科洛尔变为蓝色，或后台＃7986CB？包含的CSS是好的，因为改变填充确实影响jumbotron。

我觉得它工作正常https://jsfiddle.net/2Lzo9vfc/593/ –

答

使用：

background-color : #222 !important ;

答

因为你直接重写引导的CSS，你需要使用相同的语法，因为他们做：

.jumbotron { 
    background-color: #7986CB; 
}

或者，您可以添加!important给力的覆盖，但不建议这样做。

使用开发人员工具可以很容易地查看应用了哪些CSS以及哪些规则。不适用的有效规则将被删除。

谢谢！ '重要的'事情奏效了。改为'背景颜色'没有 – eran

答

使用自定义类的特异性如果需要的话，你并不需要使用重要的东西这么简单！请参阅MDN Specificity。

工作实例：

.jumbotron.jumbotron-blue { 
 
    background: #7986CB; 
 
    color: blue; 
 
    padding: 70px 30px; 
 
    margin: 0; 
 
} 
 
.jumbotron.jumbotron-blue h1 { 
 
    margin: 0; 
 
} 
 
.heading-paragraph { 
 
    padding-top: 70px; 
 
    margin: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<header class="jumbotron jumbotron-blue"> 
 
    <div class="container"> 
 
    <h1>This is a Heading</h1> 
 
    <p class="heading-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
    </p> 
 
    </div> 
 
</header> 
 

 
<div class="well">Hello</div>

Jumbotron的颜色和背景不会改变

相关推荐