更改引导卡标题的颜色

Posted 2023-03-21

【中文标题】更改引导卡标题的颜色

【英文标题】：Changing color of a bootstrap card header

【发布时间】：2020-12-28 16:42:54

【问题描述】：

我的应用程序中有一个带有标题的引导卡，如下所示：

作为我使用的代码：

<div class="card">
      <div class="card-header card-header-warning">
           <h4 class="card-title">Blah blah</h4>
      </div>

      <div class="card-body">
      </div>
</div>

但我不想使用在引导程序中定义的颜色（如主要、警告、成功......），我想使用其他颜色，如青色或波尔多（在 GRB fromat 或 HEX 中，而不是引导程序）。

我该如何实现呢？ 我尝试在 div 中定义一个 ID，如下所示：

<div class="card-header card-header-warning" id="card-header-color">

在我的 css 中，我有：

#card-header-color 
   background-color: cyan;

但一切都没有改变。

然后我删除了“card-header-warning”部分，但是样式也没有了（看图），所以我只需要一种改变颜色的方法，而不必再次设置标题的样式。

如果你能帮助我，我会很高兴的。

【问题讨论】：

什么造型都没了。我无法重现此问题？

@AlwaysHelping 你在第一张图片上看到边界有一个半径，它有点小。然后青色的没有边界半径，它是卡片的整个宽度。

【参考方案1】：

确保您的 css 文件在 head 标签上的引导 css 文件之后附加 像这样试试.card > .card-header-warningbackground: cyan 还有问题吗？ 确保您的代码位于样式表的末尾 还有问题吗？ 尝试强制覆盖.card-header-warningbackground: cyan!important

【讨论】：

非常感谢，问题是我没有使用属性“background”，而是使用了“background-color”！

【参考方案2】：

您可以尝试使用!important 规则仅覆盖颜色。

你的代码会变成：

#card-header-color 
   background-color: cyan !important;

和

<div class="card-header card-header-warning" id="card-header-color">

【讨论】：

非常感谢，问题是我没有使用属性“background”，而是使用了“background-color”，而且我需要添加“！important”，所以它是问题的一部分:)

【参考方案3】：

您可以在 CSS 中使用 !important 属性（通常它应该可以工作）。

#card-header-color 
   background-color: cyan !important;

【讨论】：

非常感谢，问题是我没有使用属性“背景”，而是使用了“背景颜色”。谢谢，我实际上需要“！重要”

【参考方案4】：

首先，您不应该使用 ID 来设置组件的样式。这不是一个好习惯。

此外，您可以使用text-white 或其他任何方式为其中的文本着色以满足您的需求。因此，您的 html 将如下所示：

<div class="card">
      <div class="card-header card-header-color">
           <h4 class="card-title text-white">Blah blah</h4>
      </div>

      <div class="card-body">
      </div>
</div>

还有你的 CSS：

.card-header-color 
  background-color: cyan;

---

查看引导文档，您还可以了解如何按照预期的方式实现卡片，这里是蓝色信息卡片的示例。

<div class="card text-white bg-info">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

【讨论】：

非常感谢，问题是我没有使用属性“background”，而是使用了“background-color”