CSS 如何覆盖 Bootstrap 的面板标题背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26505033/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to override Bootstrap's Panel heading background color?
提问by Hyman Twain
I'm using a Panel from Bootstraphowever for the heading I want to use my own background color for the heading. When I don't put panel-headingclass for the div, the layout gets screwed. So I thought I should keep panel-headingbut then find a way to override the background color. So I decided to create a custom css class and use background-colorand then add it to the div with panel-heading. But this didn't make any effect.
我正在使用 Panel fromBootstrap但是作为标题我想使用我自己的背景颜色作为标题。当我不为 放置panel-heading类时div，布局就会被搞砸。所以我想我应该保留panel-heading，然后找到一种方法来覆盖背景颜色。所以我决定创建一个自定义 css 类并使用background-color，然后将其添加到 div 中panel-heading。但这没有任何效果。
Any idea how to override the heading color of the panel?
知道如何覆盖面板的标题颜色吗？
Code:
代码：
<div class="panel panel-default">
<div class="panel-heading custom_class" >
</div>
</div>
回答by Marco
This should work:
这应该有效：
.panel > .panel-heading {
background-image: none;
background-color: red;
color: white;
}
回答by KiV
You can create a custom class for your panel heading. Using this css class you can style the panel heading. I have a simple Fiddle for this.
您可以为面板标题创建自定义类。使用这个 css 类，您可以设置面板标题的样式。我有一个简单的小提琴。
HTML:
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:
CSS：
.panel-default > .panel-heading-custom {
background: #ff0000; color: #fff; }
Demo Link:
演示链接：
回答by Pratul Sanwal
How about creating your own Custom Panel class? That way you won't have to worry about overriding Bootstrap.
如何创建自己的自定义面板类？这样你就不必担心覆盖 Bootstrap。
HTML
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
CSS
.panel-custom-horrible-red {
border-color: #ff0000;
}
.panel-custom-horrible-red > .panel-heading {
background: #ff0000;
color: #ffffff;
border-color: #ff0000;
}
回答by rmcsharry
Bootstrap sometimes uses contextual class constructs. Those are what you should target to change styling.
Bootstrap 有时使用上下文类结构。这些是你应该改变样式的目标。
You don't need to create your own custom class as suggested in the answer from Kiran Varti.
您不需要按照 Kiran Varti 的答案中的建议创建自己的自定义类。
So you only need:
所以你只需要：
CSS:
CSS：
.panel-default > .panel-heading {
background: #black;
}
HTML:
HTML：
<div class="panel panel-default">
Explanation here. Also see contextual class section here.
To match navbar-inverse use #222. Panel-inverse was requestedin V3, but rejected due to larger priorities.
要匹配 navbar-inverse，请使用 #222。在 V3中请求了面板反转，但由于优先级较大而被拒绝。
You can change the foreground color in that heading override or you can do it separately for panel titles. Depends what you are trying to achieve.
您可以更改该标题覆盖中的前景色，也可以单独为面板标题执行此操作。取决于你想要达到的目标。
.panel-title {
color: white;
}
回答by Alex Heresmann
Another way to change the color is remove the default class and replace , in the panel using the classes of bootstrap.
另一种更改颜色的方法是在面板中使用 bootstrap 的类删除默认类并替换 , 。
example:
例子：
<div class="panel panel-danger">
<div class="panel-heading">
</div>
</div>
回答by NetEmmanuel
You can simply add an id attribute to the panel. Like this
您可以简单地向面板添加一个 id 属性。像这样
<div class="panel-heading" id="mypanelId">Hello world </div>
<div class="panel-heading" id="mypanelId">Hello world </div>
Then in your custom CSS file:
然后在您的自定义 CSS 文件中：
#mypanelId{
background-image: none;
background: rgba(22, 20, 100, 0.8);
color: white;
}
回答by Hajar Elkoumikhi
I tried using custom panel class but it didn't work. So for those who are struggling just like me, you can use inline CSSand it works fine for me.
我尝试使用自定义面板类，但没有用。所以对于那些像我一样挣扎的人，你可以使用inline CSS它，它对我来说很好用。
Here is what my code looks like :
这是我的代码的样子：
<div class="panel-heading" style="background-image:none;background: #a4c6ff;">
回答by L Figueroa
.panel-default >.panel-heading
{
background: #ffffff;
}
This is what worked for me to change the color to white.
这就是我将颜色更改为白色的方法。
回答by invinciblejai
am assuming custom_class to be your class to override heading color of the panel. just add !important to it or add inline styles or a id and add styles as they will have more specificity over class added styles.
我假设 custom_class 是你的类来覆盖面板的标题颜色。只需添加 !important 或添加内联样式或 id 并添加样式，因为它们将比类添加的样式具有更多的特异性。
with !important
.custom_class{ background-color: red !important; }
with !important
with ID :
#custom_id{ background-color: red; }
与 !important
.custom_class{ 背景颜色：红色！重要；}
与 !important
带身：
#custom_id{ 背景颜色：红色；}
-with inline styles :
- 内联样式：
<div id="custom_id" class="panel panel-default">
<div class="panel-heading custom_class" style="background-color:red">
</div>
</div>
回答by Luis Melo
Just check the bootstrap. CSS and search for the class panel-heading and copy the default code.
只需检查引导程序。CSS 并搜索类面板标题并复制默认代码。
Copy the default CSS to your personal CSS but vive it a diference classname like my-panel-header for example.
将默认 CSS 复制到您的个人 CSS 中，但使用不同的类名，例如 my-panel-header。
Edit the css Code from the new clones class created.
从创建的新克隆类编辑 css 代码。
