Question

这可能不是一件容易的事，但我无法弄清楚..我试图改变引导卡头的背景颜色，但是当我添加background-color: #00AA9E时它似乎以某种方式破坏了标题的外观..？有没有人见过这个？它是否与卡嵌套这一事实有关？它是引导程序中的错误吗？

Before background-color: #00AA9E

After background-color: #00AA9E

Answer 1

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

但是，每当我使用此代码时，我都没有相同的问题：

＆＃13;

<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>

＆＃13;

还有其他可能影响你不能向我们展示的风格吗？

Answer 2

我知道已经过了几年，但是我想我会添加我的答案，因为公认的答案是一种绕行的方式，而且还有一种更直接的方式。将!important应用于CSS类中的设置，将导致它们覆盖同一元素上另一个CSS类中设置的所有设置。希望这对某人有帮助。

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

Answer 3

找到一个修复，我把卡片（不是卡片头）的背景颜色放到＃00AA9E，然后将卡片主体放到白色。可能不是正确的方法，但它为我做了工作。：）

Bootstrap卡标题背景颜色错误

3 个答案: