badge 不显示 badges 不显示（Bootstrap 徽章）问题

最新推荐文章于 2023-12-28 15:12:41 发布

259-aaa

最新推荐文章于 2023-12-28 15:12:41 发布

阅读量2.6k

点赞数 8

分类专栏： Exception 学习文章标签： bootstrap css html

本文链接：https://blog.youkuaiyun.com/qq_44680550/article/details/122118053

版权

学习同时被 2 个专栏收录

66 篇文章

订阅专栏

Exception

5 篇文章

订阅专栏

本文介绍了在使用 Bootstrap 时遇到徽章（badge）不显示的BUG现象，对比展示了正确的显示效果，并深入探讨了问题的原因。通过检查 Bootstrap 的版本，提供了对应的修复代码，包括 Bootstrap 4 和 Bootstrap 5 的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

badge 不显示（Bootstrap4 徽章（Badges））问题

BUG效果
正确效果
原因
相关代码
- bootstrap4
- bootstrap5

BUG效果

在这里插入图片描述

正确效果

在这里插入图片描述

原因

在这里插入图片描述

检查你的 bootstrap 版本

相关代码

bootstrap4

<span class="badge badge-primary">主要</span>
<span class="badge badge-secondary">次要</span>
<span class="badge badge-success">成功</span>
<span class="badge badge-danger">危险</span>
<span class="badge badge-warning">警告</span>
<span class="badge badge-info">信息</span>
<span class="badge badge-light">浅色</span>
<span class="badge badge-dark">深色</span>

bootstrap5

<span class="badge bg-primary">主要</span>
<span class="badge bg-secondary">次要</span>
<span class="badge bg-success">成功</span>
<span class="badge bg-danger">危险</span>
<span class="badge bg-warning">警告</span>
<span class="badge bg-info">信息</span>
<span class="badge bg-light">浅色</span>
<span class="badge bg-dark">深色</span>