Bootstrap 4徽章不起作用 - 只是没有出现

Question

我试图以这种方式使用bootstrap 4徽章:

<td><span class="badge badge-warning">{{ object.get_type_display }}</span></td>

我正在使用:

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css

可能是什么原因？

Answer 1

至少在 Bootstrap 5.1.x版本中，徽章在 v4 中被删除后可以再次使用。

您可以使用以下代码在标题旁边显示徽章：

<h1>Example heading <span class="badge bg-secondary">New</span></h1>

现在还支持按钮、背景颜色和药丸徽章。您可以在这里找到文档：https ://getbootstrap.com/docs/5.1/components/badge/

Answer 2

badge有一种与课程混淆的棘手方法alert。

例子：

<span class="badge alert-success">Active</span>

Answer 3

您不能使用“徽章徽章警告”。根据 Bootstrap 中的新文档，现在它就像“徽章 bg-警告”

看看这个：- https://getbootstrap.com/docs/5.0/components/badge/

Answer 4

它不起作用，因为徽章没有应用背景颜色。由于 bootstrap 已经有一个用于背景颜色的“bg”组件，因此我将“badge-warning”替换为“bg-warning”并且它起作用了。这是最终的外观：

<span class="badge bg-warning">Primary</span>

Answer 5

.badge在v4中掉了下来:

丢弃.badge组件,因为它几乎与标签/标签相同.将.tag-pill修改器与标签组件一起用于圆角外观.

但是他们返回了它(git issue)所以使用最新版本--v4.0.0-alpha.6

Answer 6

该 css 上没有徽章类。尝试另一个版本（据我所见，是 alpha.6 版本）。使用以下链接：https : //maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css