如何更改引导面板页脚颜色答案

【问题标题】：How to change bootstrap panel footer color如何更改引导面板页脚颜色
【发布时间】：2016-01-11 20:42:41
【问题描述】：

我有一个引导面板，我想像页眉一样更改页脚颜色。我在panel-footer 类旁边添加了panel-primary，但只有顶部轮廓颜色变为原色。那么，如何更改面板页脚的颜色？

代码：

<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>

【问题讨论】：

请注意，标题的背景颜色设置在.panel-heading 不是 .panel-primary。

标签： html twitter-bootstrap panel

【解决方案1】：

您必须创建一个自定义类以应用于面板页脚类：

请注意，面板页脚不会在使用上下文变体时继承颜色和边框，因为它们不应该在前景中。见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>

【讨论】：

【解决方案2】：

您必须更改适当的 CSS 才能实现这一点。

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;
}

您可以覆盖此样式（由于 Bootstrap CSS 的结构，您不应将 panel-primary 类添加到 panel-footer）。

【讨论】：

【解决方案3】：

看看这个：

CSS

.panel-footer{
  background-color:#337ab7;
  border-color: #337ab7;
  color: #FFFFFF;

 }

我覆盖了引导 css，但这不是一个好的解决方案。更好的方法是声明自己的类并更改颜色。

jsfiddle

【讨论】：

【解决方案4】：

也许您可以显示这些面板的 CSS？

这可能是因为另一个 CSS 标记的优先级高于“panel-primary”标记。您可以尝试在 Firefox/Chrome 中使用 web-developer 工具来显示正在覆盖它的内容。

【讨论】：

【解决方案5】：

如果您使用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>

【讨论】：