如何覆盖引导面板标题背景颜色？答案

【问题标题】：How to override Bootstrap's Panel heading background color?如何覆盖引导面板标题背景颜色？
【发布时间】：2014-12-17 18:14:36
【问题描述】：

我正在使用来自Bootstrap 的面板，但是对于标题，我想使用我自己的背景颜色作为标题。当我没有为div 放置panel-heading 类时，布局会搞砸。所以我想我应该保留panel-heading，然后找到一种方法来覆盖背景颜色。所以我决定创建一个自定义的css类并使用background-color，然后用panel-heading将它添加到div中。但这并没有产生任何效果。

知道如何覆盖面板的标题颜色吗？

代码：

<div class="panel panel-default">
  <div class="panel-heading custom_class" >
  </div>
</div>

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

这应该可行：

.panel > .panel-heading {
    background-image: none;
    background-color: red;
    color: white;

}

【讨论】：

只是为了明确帮助在这里绊倒的人，除非您删除背景图像，否则您无法设置背景颜色。
背景图片覆盖了背景颜色，所以即使设置了背景颜色，也看不到。

【解决方案2】：

您可以为面板标题创建自定义类。使用这个 css 类，您可以设置面板标题的样式。我有一个简单的小提琴。

HTML：

<div class="panel panel-default">
   <div class="panel-heading panel-heading-custom">
       <h3 class="panel-title">Panel title</h3>
   </div>
   <div class="panel-body">
       Panel content
   </div>
</div>

CSS：

.panel-default > .panel-heading-custom {
background: #ff0000; color: #fff; }

演示链接：

http://jsfiddle.net/kiranvarthi/t1Lq966k/

【讨论】：

这是唯一有效的方法，如果您不想覆盖所有面板标题，只需自定义一个。谢谢。
您不需要添加自己的自定义类，只需直接针对引导上下文类即可。看我的回答。
最佳答案。您几乎可以像在标题上使用 info 类一样使用 .panel-heading-custom 类

【解决方案3】：

创建自己的自定义面板类怎么样？这样您就不必担心覆盖 Bootstrap。

HTML

<div class="panel panel-custom-horrible-red">
   <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
   </div>
   <div class="panel-body">
      Panel content
    </div>
</div>

CSS

.panel-custom-horrible-red {
    border-color: #ff0000;
}
.panel-custom-horrible-red > .panel-heading {
    background: #ff0000; 
    color: #ffffff;
    border-color: #ff0000;
}

小提琴： https://jsfiddle.net/x05f4crg/1/

【讨论】：

您不需要创建自己的类或覆盖引导程序。只需使用上下文 css 来定位您想要的内容。请参阅我的回答，了解如何做到这一点，这很容易。
@rmcshry 使用上下文 css is 覆盖引导样式。创建自己的自定义面板变体是一种更好的做法，因为您不必“战斗”或覆盖任何引导样式。它可以让您更好地控制。
感谢您的澄清，因此正确的短语是“您不需要创建自己的类来覆盖引导程序。”但是由于 Bootstrap 提供了这些上下文类，你可以定位它们，我不觉得这样做有什么困难——特别是如果我希望我的所有面板都使用这种风格，我通常会这样做。

【解决方案4】：

Bootstrap 有时会使用上下文类结构。这些是您改变样式的目标。

您不需要按照 Kiran Varti 的回答中的建议创建自己的自定义类。

所以你只需要：

CSS：

.panel-default > .panel-heading {
  background: #black;
}

HTML：

<div class="panel panel-default">

解释here。另请参阅上下文类部分here。

要匹配 navbar-inverse，请使用 #222。 Panel-inverse 在 V3 中是 requested，但由于优先级更高而被拒绝。

您可以更改该标题覆盖中的前景色，也可以单独为面板标题进行更改。取决于您要达到的目标。

.panel-title {
  color: white;
}

【讨论】：

【解决方案5】：

另一种更改颜色的方法是使用引导程序的类在面板中删除默认类并替换。

示例：

<div class="panel panel-danger">
  <div class="panel-heading">
  </div>
</div>

【讨论】：

【解决方案6】：

我尝试使用自定义面板类，但它不起作用。所以对于那些和我一样苦苦挣扎的人，你可以使用inline CSS，它对我来说很好。

这是我的代码的样子：

<div class="panel-heading" style="background-image:none;background: #a4c6ff;">

【讨论】：

【解决方案7】：

您可以简单地向面板添加一个 id 属性。像这样

<div class="panel-heading" id="mypanelId">Hello world </div>

然后在您的自定义 CSS 文件中：

#mypanelId{
    background-image: none;
    background: rgba(22, 20, 100, 0.8);
    color: white;
     }

【讨论】：

【解决方案8】：

我假设 custom_class 是你的类来覆盖面板的标题颜色。只需添加 !important 或添加内联样式或 id 并添加样式，因为它们将比类添加样式更具特异性。

使用 !important

.custom_class{ 背景颜色：红色！重要； }
使用 !important
带身份证：

#custom_id{ 背景颜色：红色； }

-带有内联样式：

<div id="custom_id" class="panel panel-default">
      <div class="panel-heading custom_class" style="background-color:red">
      </div>
    </div>

【讨论】：

@AlexTwain 你能帮它做一个小提琴吗，会很有帮助的。

【解决方案9】：

.panel-default >.panel-heading
{
    background: #ffffff;
}

这就是我将颜色更改为白色的方法。

【讨论】：

【解决方案10】：

只需检查引导程序。 CSS 并搜索类 panel-heading 并复制默认代码。

将默认 CSS 复制到您的个人 CSS 中，但给它一个不同的类名，例如 my-panel-header。

从创建的新克隆类中编辑 css 代码。

【讨论】：

【解决方案11】：

使用这个：

.panel-heading {
    background-color: #ececb0 !important;
}

【讨论】：