Question

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

代码：

<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

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

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

Answer 3

检查出来：

<强> CSS

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

 }

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

jsfiddle

Answer 4

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

可能是因为另一个CSS标记优先于“panel-primary”标记。您可以尝试在Firefox / Chrome中使用Web开发人员工具来显示覆盖它的内容。

Answer 5

如果您使用的是Bootstrap 4.1，则只需添加上下文背景色类。与在Bootstrap 4.1中一样，面板被Cards取代，您问题的可能更新答案可能是：

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

如何更改自举面板页脚颜色

5 个答案: