动态引导设置徽章的颜色

Question

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

我的一个模型具有颜色属性，我想通过将徽章的颜色设置为对象的颜色来使用引导程序的徽章来可视化它。

在文档中，似乎我只能从主要，次要等的预定义颜色中进行选择。 在网上，我主要找到如何覆盖和更改所有徽章的主要颜色的提示。或者在新的 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属性以覆盖引导程序规则。