如何更改 bootstrap 面板页脚颜色

Question

我有一个 bootstrap 面板，我想像更改页眉一样更改页脚颜色。我在 panel-footer class 旁边添加了 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

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

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

Answer 2

您必须创建自定义 class 才能应用于面板页脚 class:

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>

Answer 3

您必须进行适当的更改 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;
}

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

Answer 4

看看这个：

CSS

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

 }

我覆盖了 bootstrap css，但这不是一个好的解决方案。更好的方法是声明您自己的 class 然后更改颜色。

jsfiddle

Answer 5

如果您使用 Bootstrap 4.1，您只需添加上下文背景颜色 class。在 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>

如何更改 bootstrap 面板页脚颜色

How to change bootstrap panel footer color

html

panel

twitter-bootstrap