Question

我正在尝试为我的井添加背景颜色，出于某种原因，它不会覆盖引导程序默认值。我不想覆盖井类，只是这一个。

直接在html中添加代码作为样式标记有效，但我希望将css保留在样式表中。

工作代码示例：

<div class="well" style="background-color: #ffffff;">

的style.css

/* Progress Bars - Well */

.well-progress-bars {
    background: rgba(255,255,255,1);
    background-color: #ffffff;
}

home.php

<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">

...

<div class="well well-progress-bars">

更新

我的浏览器似乎是一个奇怪的缓存问题。我原来的代码工作正常，因为某种原因我无法通过刷新看到。

Answer 1

试试这个

.well.well-progress-bars {
    background: rgba(255,255,255,1);
    background-color: #ffffff;
}

Answer 2

试试这个：

.well {
    background-color: #ffffff;
}

或

.well.well-progress-bars {
    background: rgba(255,255,255,1);
    background-color: #ffffff;
}

确保外部样式表的链接标记位于引导样式表下方。

Answer 3

在内联CSS中使用style=""时，!important可能会覆盖它。尝试将!important添加到CSS代码中。在您失败的尝试中，不需要.well，但您应该尝试：

.well > .well-progress-bars {
    background: rgba(255,255,255,1);
    background-color: #ffffff;
}

Answer 4

您需要做的就是通过

覆盖Bootstrap CSS

a）将规则定义为特定于Bootstrap但在其之后，或

b）只是比它更具体。

此外，>并不意味着在该符号后面也有类，它会选择某个选择器的直接子项。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<style>
.well {
  background-color: red;
}
</style>

<div class="well well-progress-bars">Some text</div>

Answer 5

问题是由浏览器缓存问题引起的。

原始代码有效：https://jsfiddle.net/Lr5ovLbx/1/

.well-progress-bars {
    background: rgba(255,255,255,1);
    background-color: #ffffff;
}

Bootstrap井背景颜色

5 个答案: