如何覆盖Bootstrap的面板标题背景颜色？

Question

我正在使用一个面板来Bootstrap标题我想用自己的背景颜色作为标题.当我不panel-heading上课时div,布局被搞砸了.所以我认为我应该保留,panel-heading但后来找到一种方法来覆盖背景颜色.所以我决定创建一个自定义的css类并使用background-color然后将它添加到div中panel-heading.但这并没有产生任何影响.

知道如何覆盖面板的标题颜色吗？

码:

<div class="panel panel-default">
  <div class="panel-heading custom_class" >
  </div>
</div>

Answer 1

这应该工作:

.panel > .panel-heading {
    background-image: none;
    background-color: red;
    color: white;

}

Answer 2

您可以为面板标题创建自定义类.使用此css类可以设置面板标题的样式.我有一个简单的小提琴.

HTML:

<div class="panel panel-default">
   <div class="panel-heading panel-heading-custom">
       <h3 class="panel-title">Panel title</h3>
   </div>
   <div class="panel-body">
       Panel content
   </div>
</div>

CSS:

.panel-default > .panel-heading-custom {
background: #ff0000; color: #fff; }

演示链接:

http://jsfiddle.net/kiranvarthi/t1Lq966k/

Answer 3

如何创建自己的自定义面板类？这样你就不用担心重写Bootstrap了.

HTML

<div class="panel panel-custom-horrible-red">
   <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
   </div>
   <div class="panel-body">
      Panel content
    </div>
</div>

CSS

.panel-custom-horrible-red {
    border-color: #ff0000;
}
.panel-custom-horrible-red > .panel-heading {
    background: #ff0000; 
    color: #ffffff;
    border-color: #ff0000;
}

小提琴: https ://jsfiddle.net/x05f4crg/1/

Answer 4

我假设 custom_class 是您的类来覆盖面板的标题颜色。只需添加 !important 即可，或者添加内联样式或 id 并添加样式，因为它们比类添加的样式具有更多特异性。

• 与！重要

  .custom_class{ 背景颜色：红色！重要；}

• 与！重要

• 身份证号码：

  #custom_id{ 背景颜色：红色；}

- 具有内联样式：

<div id="custom_id" class="panel panel-default">
      <div class="panel-heading custom_class" style="background-color:red">
      </div>
    </div>