更改引导折叠面板背景颜色答案

【问题标题】：Change bootstrap's collapse panel background color更改引导折叠面板背景颜色
【发布时间】：2017-02-01 20:07:59
【问题描述】：

我正在使用Bootstraps 3 个折叠面板，它们在关闭时看起来像such。

我希望将背景和文本颜色更改为其他颜色，我相信有趣的css sn-p 如下（bootstrap.css）：

.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
  padding: 15px;
}
.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.panel-heading > .dropdown .dropdown-toggle {
  color: inherit;
}

下面是我使用Jade 实现一个折叠面板的方法：

div(class='panel-group' id='accordion2' role='tablist' aria-multiselectable='true')
        div(class='panel panel-default')
            div(class='panel-heading' role='tab' id='headingOneA2')
                h4(class='panel-title')
                    a(role='button' data-toggle='collapse' data-parent='#accordion2'
                    href='#collapseOneA2' aria-expanded='true' aria-controls='collapseOneA2') 42sh
            div(id="collapseOneA2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOneA2")
                div(class='panel-body')
                    p Coded a fully functionnal shell environment in C offering features such as pipes, redirection, dynamic completion etc.

但我似乎无法弄清楚如何更改背景/文本颜色，而且我的研究还没有定论。

【问题讨论】：

标签： css twitter-bootstrap pug

【解决方案1】：

你正在失去与 Bootstrap 的 css 的特异性战争。删除 panel-default 类，然后按照附件应用您的 css。

.panel-heading {
    background-color: red;
    color: white;
}

.panel-body {
    background-color: blue;
    color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="accordion2" role="tablist" aria-multiselectable="true" class="panel-group">
  <div class="panel">
    <div role="tab" id="headingOneA2" class="panel-heading">
      <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseOneA2" aria-expanded="true" aria-controls="collapseOneA2">42sh</a></h4>
    </div>
    <div id="collapseOneA2" role="tabpanel" aria-labelledby="headingOneA2" class="panel-collapse collapse">
      <div class="panel-body">
        <p>Coded a fully functionnal shell environment in C offering features such as pipes, redirection, dynamic completion etc.</p>
      </div>
    </div>
  </div>
</div>

【讨论】：