Question

试图改变我的jumbotron的背景和颜色，没有任何反应。 padding有效，但background没有。

我的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>

为什么将collor变为蓝色，或者＃7986CB的背景？包含CSS是可以的，因为更改填充会影响jumbotron。

Answer 1

因为您直接覆盖了Bootstrap的CSS，所以您需要使用与它们相同的语法：

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

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

使用开发人员工具，您可以轻松查看应用了哪些CSS以及规则。划掉的有效规则将被删除。

Answer 2

使用：

background-color : #222 !important ;

Answer 3

我看到它的方式，它应该工作，所以确保你的CSS链接在引导程序下面，否则默认的引导程序样式将保持覆盖你的CSS。

Answer 4

如果需要，请使用自定义类以获得特异性，您不需要使用！important 来实现这么简单的事情。请参阅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>

Answer 5

您的CSS链接必须位于Bootstrap链接下方。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <--Bootstrap-->
	<link rel="stylesheet" href="app.css"> <--User_Defined-->

Jumbotron颜色和背景不会发生变化

5 个答案: