html - Bootstrap 4 Accordion 卡片自定义样式 CSS

Question

所以我在这方面已经做得太久了，真的很想得到一些帮助来定制这个 Bootstrap 4 Accordion 。

我希望卡片和链接的背景透明，字体大小改变，字体颜色改变并且没有下划线。我已经使用默认和特殊类连接了所有可能的 ID 和类，使用 !important 并且没有运气。 Bootstrap 4 文档仅提供颜色有限的内联样式。

.testing {
  background-color: transparent !important;
}

.special-card {
  background-color: transparent !important;
}

.special-card a {
  color: grey !important;
  font-size: 15px !important;
  text-decoration: none !important;
}

.special-card a:hover {
  color: white !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="panel-group" id="accordion">
  <div class="card text-center">
    <div class="card-header testing">
      <h6 class="card-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Title</a>
      </h6>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="card-block special-card">
        <a href="" class="list-group-item">Link 1</a>
        <a href="" class="list-group-item">Link 2</a>
        <a href="" class="list-group-item">Link 3</a>
      </div>
    </div>
  </div>
</div>

Answer 1

您好，请尝试下面的代码，我已经为正文添加了背景颜色，您可以根据需要更改它

html

<div class="panel-group" id="accordion">
  <div class="card text-center testing">
    <div class="card-header ">
      <h6 class="card-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Title</a>
      </h6>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="card-block special-card">
        <a href="" class="list-group-item">Link 1</a>
        <a href="" class="list-group-item">Link 2</a>
        <a href="" class="list-group-item">Link 3</a>
      </div>
    </div>
  </div>
</div>

CSS

body
{
  background-color: #212121;
}



.testing{
  background-color: transparent;
}
.testing .card-header
{
  background-color: transparent;
}
.testing .card-title a
{
  text-decoration:none;
  font-size:20px;
  color:grey;
}

.special-card {
  background-color: transparent;
}

.special-card
{
  background-color: transparent;
}

.special-card a {
  color: grey;
  font-size: 15px;
   background-color: transparent;
}

.special-card a:hover {
  color: white;
   text-decoration: none;
}

不需要使用 !important 标志..

希望对你有帮助 Here is a link for reference