Bootstrap 自定义手风琴答案

【问题标题】：Bootstrap customizing accordionBootstrap 自定义手风琴
【发布时间】：2017-07-28 10:00:06
【问题描述】：

我正在使用 bootstrap 创建手风琴，每个手风琴都使用以下 div：

<div class="panel-group" id="accordion">

每个标题使用：

         <div class="panel-heading">
                    <h4 class="panel-title">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Heading</a>
                    </h4>
                </div>

使用 CSS，如何将文本设置为白色而不是黑色？我可以将style="color: white" 放在每个标题的标签内，但我必须多次使用手风琴，并且所有标题都应该有白色文本。哪个是覆盖默认黑色文本的最佳方法？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您可以使用类选择器来实现相同的目的。参考下面的css

<style>
.panel-title a{
   color: white !important;
}
</style>

【讨论】：

完美，对我来说效果很好。此外，目前我正在更改背景颜色：
。如果我想使用 CSS 来做到这一点，我可以添加一个名为“x”的类并在 CSS 中更改 x 的背景颜色吗？
是的，您可以创建自己的类，也可以使用.panel-heading{background-color: #00866C !important;}

【解决方案2】：

div.panel-heading h4{ color: white !important; }

或进行注入设置所有

style="color: white"

【讨论】：

【解决方案3】：

最好的选择是添加一个新类以避免修改引导类。

但是，如果您想为所有手风琴设置白色，请使用以下 CSS 规则：

.accordion-toggle {
    color: white !imporant;
}

【讨论】：