Html 如何更改引导面板页脚颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33113834/
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 change bootstrap panel footer color
提问by Bayu Anggara
I have a bootstrap panel, and I want to change the footer color like its header. I added panel-primarynext to panel-footerclass, but only top outline color that is changed into primary color. So, how can I change the color of panel footer ?
我有一个引导面板，我想改变页脚的颜色，就像它的页眉一样。我panel-primary在panel-footer班级旁边添加了，但只有顶部轮廓颜色变成了原色。那么，如何更改面板页脚的颜色？
code :
代码 ：
<div class="panel panel-primary">
<div class="panel-heading">
Panel Heading
</div><!--.panel-heading-->
<div class="panel-body">
Panel Body
</div><!--.panel-body-->
<div class="panel-footer panel-primary">
Panel Footer
</div><!--.panel-footer-->
</div>
回答by vanburen
You have to create a custom class to apply to the panel-footer class:
您必须创建一个自定义类以应用于面板页脚类：
Note that panel footers do notinherit colors and borders when using contextual variations as they are not meant to be in the foreground. See docs.
请注意，在使用上下文变体时，面板页脚不会继承颜色和边框，因为它们并不意味着位于前景中。请参阅文档。
.panel-footer.panel-custom {
background: red;
color: white;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-primary">
<div class="panel-heading">Panel Heading</div>
<!--.panel-heading-->
<div class="panel-body">Panel Body</div>
<!--.panel-body-->
<div class="panel-footer panel-custom">Panel Footer</div>
<!--.panel-footer-->
</div>回答by max
You have to change proper CSS to achieve that.
您必须更改适当的 CSS 才能实现这一点。
Defaults for Bootatrap 3 are:
Bootatrap 3 的默认值是：
.panel-footer {
padding: 10px 15px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
You can override this styles (you shouldn't add panel-primaryclass to panel-footer, because of the structure of Bootstrap CSS).
您可以覆盖此样式（由于 Bootstrap CSS 的结构，您不应将panel-primary类添加到panel-footer）。
回答by Mario Kurzweil
Check this out:
看一下这个：
CSS
CSS
.panel-footer{
background-color:#337ab7;
border-color: #337ab7;
color: #FFFFFF;
}
I override the bootstrap css, but this is not a good solution. A better way is to declare your own class and change then the colors.
我覆盖了 bootstrap css，但这不是一个好的解决方案。更好的方法是声明您自己的类并更改颜色。
回答by victorf
If you are using Bootstrap 4.1you can simply add a contextual background color class. As in Bootstrap 4.1 the Panels were replaced by Cards, a possible updated answer for your question could be:
如果您使用的是Bootstrap 4.1，您可以简单地添加一个上下文背景颜色类。在 Bootstrap 4.1 中，面板被卡片取代，您的问题可能的更新答案可能是：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<div class="container">
<div class="card mt-4" style="width: 18rem;">
<div class="card-header bg-success text-light">
Card Title Here
</div>
<div class="card-body bg-warning">
For example, a card with Brazilian flag colors. No explicit CSS is being used here.
</div>
<div class="card-footer bg-primary text-center">
<a href="#" class="btn btn-outline-light">A White Button On Blue BG</a>
</div>
</div>
</div>回答by kainr2
Perhaps you can show the CSS for these panels?
也许您可以显示这些面板的 CSS？
It is likely because another CSS tag has higher precedence over "panel-primary" tag. You can try using web-developer tool in Firefox/Chrome to show what is overwriting it.
这可能是因为另一个 CSS 标签比“panel-primary”标签具有更高的优先级。您可以尝试在 Firefox/Chrome 中使用 web-developer 工具来显示覆盖它的内容。
