Bootstrap成功图标在白色而不是绿色上显示白色？

Posted 2023-03-21

【中文标题】Bootstrap成功图标在白色而不是绿色上显示白色？

【英文标题】：Bootstrap success icon showing white on white instead of green?

【发布时间】：2022-01-15 13:25:09

【问题描述】：

我直接从bootstrap docs（下）复制了代码，但由于某种原因，我的“成功”徽章显示为白色背景上的白色文本？我可以突出显示文本，它在“那里”，但没有像应有的那样显示。

来自引导程序的代码：

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

我页面上的代码：

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

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

【参考方案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