html - 如何更改 Bootstrap 面板页脚颜色

Question

我有一个 Bootstrap 面板，我想像更改页眉一样更改页脚颜色。我在 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>

Answer 1

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

Note that panel footers do not inherit 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>