Bootstrap：更改面板的背景颜色答案

【问题标题】：Bootstrap: Change background-color of panelBootstrap：更改面板的背景颜色
【发布时间】：2017-11-30 17:57:24
【问题描述】：

我发现了一些以前的帖子，但是我看到的那些错误对我来说很明显，不幸的是我还没有找到我的问题的答案。

我正在使用引导程序的主面板：

<div class="panel panel-primary">...</div>

我想更改标题的背景颜色，所以我将这个类添加到我的 CSS 以更改背景颜色：

.panel-primary > .panel-heading {
    color: yellow !important;
    background-color: yellow !important;
    border-color: #F6E3CE !important;
}

但是，标题的背景色只是保持蓝色。令我恼火的是颜色（字体颜色）变为黄色，这表明我正在编辑正确的 CSS 块。
而且我可以改变面板主体的背景颜色，同样的方式也可以正常工作。

对此有什么想法吗？

这是一个屏幕截图，可以看到只有背景颜色不会改变：

【问题讨论】：

您可以检查您的页面源代码并查看正在使用哪个引导代码而不是您的代码。如here 所示，您可以看到所示 CSS 代码的源代码，因此只需从引导程序中查找针对该元素的代码。一旦确定了正在使用的代码，请确保对要用于覆盖该代码的代码使用相同或更多的主导 CSS 选择器。
您好，非常感谢！在您的帮助下，我刚刚发现它是以下块： background-image: linear-gradient(to bottom,#2e6da4 0,#2e6da4 100%);在 chrome 开发工具中，我可以看到它在文件“gradients.less”中——我在“bootstrap.css”中搜索。但无论如何，我在哪里可以找到这个“gradients.less”文件，它不包含在我的引导文件夹中。我在chrome中更改时可以看到它有一些效果，但是我不知道文件在哪里可以长期更改。
这听起来不像是引导文件。这听起来像是一个完全独立的 CSS 文件导致了这个问题。从技术上讲，该文件可以存储在您项目中的任何位置，所以我唯一可以建议的是在您的项目文件中搜索“渐变”文件。

【解决方案1】：

抱歉，我对 stackoverflow 很陌生。看来我必须添加一条新评论才能发布另一个截图。

现在这真的很奇怪，当我在 chrome 中识别文件“gradients.less”的来源时，我得到了这个截图。enter image description here

根据这张图，我有一个目录../bootstrap/css/less/mixins/gradients.less

但实际上我拥有的目录是：../bootstrap/css，其中只有文件，例如“bootstrap.css” - 没有子文件夹“less” - 根本没有子文件夹。

【讨论】：

【解决方案2】：

您的代码需要更具体，您没有提及元素的结构，A > B 选择器意味着它将匹配具有元素 A 父元素的元素 B。为了帮助您解决问题，可以添加一些代码 sn-p 以便您获得帮助。

【讨论】：

【解决方案3】：

您需要使用background-image 或background 属性来覆盖默认背景颜色。

喜欢这个

    background-image: -webkit-linear-gradient(top,yellow 0, #dbff46 100%);

或

background:yellow;

【讨论】：

嗨，Wahdan，非常感谢。是的，这似乎确实是正确的属性，它起作用了！
唯一剩下的问题：当我查看 chrome 控制台时，它的初始颜色不是在“bootstrap.css”中定义的，而是在一个名为“gradients.less”的文件中定义的。我现在可以在我自己的 css 文件中更改它们，但它只有在我使用关键字 !important 时才有效。这意味着，它是在其他地方预定义的。我认为这不是使用 !important 的最佳方式，所以我想知道在哪里可以长期更改样式。我在下载的引导文件夹中找不到任何 .less 文件。