我不能在我的网站中使用徽章和标签答案

【问题标题】：I cannot use badges and labels in my website我不能在我的网站中使用徽章和标签
【发布时间】：2019-09-05 22:51:28
【问题描述】：

我尝试在我的网站中加入一些徽章和标签，例如 this site

问题是在我的情况下它们不起作用，我不知道为什么。

我制作了一个非常简单的索引页面和一个 style.css 来测试它。 .css 文件以某种方式工作，因为我更改了整个 index.html 的背景颜色并且它工作正常。但是标签都是灰色的，没有显示应有的颜色。

这是我的 index.html 页面。

.label,
.badge {
  background-color: #b5b5b5;
  color: #fff;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 2;
  font-weight: bold;
  padding: 3px 7px;
  text-align: center;
  vertical-align: baseline;
  white-space: nowrap;
}

.label {
  border-radius: 4px;
  display: inline;
}

.badge {
  border-radius: 10px;
  display: inline-block;
  padding: 1px 7px;
}

.label[href]:hover, .label[href]:focus {
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}

a.badge:hover, a.badge:focus {
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}

.label a,
.badge a {
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}

.label:empty,
.badge:empty {
  display: none;
}
a body {background-color: coral;}

<html>
<head>
    <link href="style.css" rel="stylesheet">
</head>

<body>
    asdadadsa
    <span class="label">Default Label</span>
<span class="label bg-gray">Gray Label</span>
<span class="label bg-green">Green Label</span>
<span class="label bg-blue">Blue Label</span>
<span class="label bg-yellow">Yellow Label</span>
<span class="label bg-red">Red Label</span>
</body>
</html>

.css 页面就是它在this page + a 中的样子 body {background-color: coral;} 只是为了测试它是否有效。

这就是他们向我展示的方式：

你知道它可能是什么吗？

【问题讨论】：

您能创建一个堆栈闪电战或类似的东西供我们测试吗？
stacksn-p 更好。无需离开网站
您需要为 Twitter 引导程序导入样式表。您可能还需要导入一个 javascript 文件。据我所知，我们没有这样做。当然，您的示例可能缺少它。
拥有这个文件中的所有 .bg- ：https://concisecss.com/archive/v2.0.0/css/concise.min.css
随意删除问题

标签： html css twitter-bootstrap

【解决方案1】：

您的 CSS 文件缺少一些类，如 bg-yellow 或 bg-gray，您应该创建它们或使用 Concise 的 CDN

【讨论】：

【解决方案2】：

您必须创建 bg-* 类 bg-green 等等。在您的样式表中，您需要添加类似

的内容

.bg-green{
  background-color: green;
}

如果你不打算使用完整的 twitter 引导程序，这种方法是可以的。然后你需要导入完整的css，但最好使用sass。

【讨论】：

这并没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方留下评论。 - From Review
但是样式表中缺少 bg-* 类。这就是为什么徽章没有显示的原因。我会编辑答案