Bootstrap 成功图标显示白底白字而不是绿色？

Question

我直接从 bootstrap docs（下图）复制了代码，但出于某种原因，我的“成功”徽章显示为白底白字？我可以突出显示文本，它“在那里”，但没有按应有的方式显示。

来自 bootstrap 的代码：

<span class="badge badge-success">Success</span>

来自我页面的代码：

<h5 class="card-title mb-2"><%= title %> <span class="badge badge-success">Success</span>
    </h5>

知道为什么它不能正常工作吗？

Answer 1

如果您使用 bootstrap 5

，则正确的是 badge bg-success

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<h5 class="card-title mb-2">
<%= title %>
<span class="badge bg-success">Success</span>
 </h5>
    
<span class="badge bg-success">Success</span>

很可能，您在项目中使用了 bootstrap 5，这就是它显示为空白的原因。如果您使用 bootstrap 4，您的代码将有效。

Bootstrap 5 badge

Bootstrap 成功图标显示白底白字而不是绿色？

Bootstrap success icon showing white on white instead of green?

html

javascript

css

ejs

bootstrap-4