如何更改 Bootstrap card-header 的 background-color？

Question

我正在尝试更改 bootstrap card-header 的 background-color，但是当我添加 background-color: #00AA9E 时，它似乎以某种方式破坏了 header..?有没有人见过这个？跟卡片嵌套有关系吗？这是 bootstrap 中的错误吗？

Before background-color: #00AA9E

After background-color: #00AA9E

Answer 1

首先，由于您将字体颜色设置为白色，只需使用 text-white class.

但是，我每次使用这段代码时都没有遇到同样的问题：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="card">
    <div class="card-header text-white" style="background-color: #00AA9E;">
      Featured
    </div>
    <div class="card-body">
      <h4 class="card-title">Special title treatment</h4>
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>

是否有其他因素可能会影响您没有向我们展示的样式？

Answer 2

找到一个修复方法，我将卡片（不是card-header）的background-color设置为#00AA9E，然后将卡片body设置为白色。可能不是正确的方法，但它为我完成了工作。 :)

Answer 3

我知道这是多年后的事了，但我想我会添加我的答案，因为接受的答案是一种迂回的方式，并且有一种更直接的方式来做到这一点。将 !important 应用于 css class 中的设置将导致它们覆盖同一元素上另一个 css class 中设置的所有设置。希望这对某人有所帮助。

.ph-card-header { color: white !important; background-color: navy !important; }

如何更改 Bootstrap card-header 的 background-color？

How to change the background-color of a Bootstrap card-header?

twitter-bootstrap

ng-bootstrap