Bootstrap 动态设置徽章的颜色

Question

我正在使用 Django 和 Bootstrap 4.5 构建一个简单的网络应用程序。

我的一个模型有一个颜色属性，我想使用 bootstrap's badge 通过将徽章的颜色设置为对象的颜色来可视化它。

在文档中，我似乎只能从预定义的颜色中选择主要颜色、次要颜色等。在网上，我主要找到了如何覆盖和更改所有徽章的主要颜色的提示。或者在新的 CSS 类中设置特定的颜色。

我想要的是使用 Django 的 HTML 模板根据 Django 对象的颜色属性动态设置徽章的颜色。

这是我目前拥有的：

{% block content %}
    <h1>{{ tag.name }}</h1>
    <p>Description: {{ tag.description }}</p>
    <p>Color: <span class="badge badge-secondary">{{ tag.color }}</span></p>
{% endblock %}

现在，徽章始终具有“次要”颜色，但我希望它具有 {{ tag.color }} 作为颜色，例如可能是 #FF0000。

Answer 1

您可以在 span 中使用属性 style ：

<span class="badge" style="background-color: {{ tag.color }};">{{ tag.color }}</span>

如果仍然无法使用，请添加 !important 属性以覆盖引导规则。