为什么不能用css在bootstrap 4中改变badge类的颜色？

k75qkfdt 于 4个月前发布在 Bootstrap

关注(0)|答案(3)|浏览(57)

Bootstrap v4.3.1中的badge类是

.badge {
   display: inline-block;
   padding: 0.25em 0.4em;
   font-size: 75%;
   font-weight: 700;
   line-height: 1;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
   border-radius: 0.25rem;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, 
   border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

字符串
为了改变它的颜色，我们可以添加以下类

.badge-success {
   color: #fff;
   background-color: #28a745;
}

型
逻辑上说，如果我想制作自己的颜色，我可以在我的css文件中创建一个新类，

.badge-mine {
   color: #212529;
   background-color: #808080;
}

型
当这个起作用的时候它应该会起作用

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

型
那么这也应该起作用，但它不起作用，即使它们看起来是一样的。

<span class="badge badge-mine">test</span>

型
我已经检查了很多答案，但似乎没有人回答为什么我们不能这样做。虽然，我不是CSSMaven，但我知道最后一个命令会覆盖前一个命令，即这应该覆盖

color: #212529;
background-color: #808080;

型
这

color: #fff;
background-color: #28a745;

型
但由于某种原因，这里没有发生
一些引导4Maven能解释为什么徽章地雷不工作，即使它看起来几乎完全像徽章成功？
谢谢

css

来源：https://stackoverflow.com/questions/56346774/why-cant-we-change-the-color-of-badge-class-in-bootstrap-4-using-css

3条答案

按热度按时间

cedebl8k1#

它应该像你所做的那样工作。但是如果你的两个徽章

<span class="badge badge-success">test</span>
<span class="badge badge-mine">test</span>

字符串
看起来一样的问题是在其他地方，你的徽章不能有相同的风格.badge-success，如果它没有它作为类。无论如何，css类优先级主要取决于它们有多具体。例如

.badge.badge-success {
   background-color: red;
}

型
覆盖

.badge-success {
   background-color: green
}

型
你可以通过在css参数中添加！important来覆盖这个行为，比如

background-color: red!important;

型

赞(0）回复(0）举报 4个月前

jm2pwxwz2#

它似乎像预期的那样工作：

.badge-mine {
   color: #212529;
   background-color: #808080;
}

.badge-mine-2 {
   color: #ff3300;
   background-color: #0022ff;
}

个字符

赞(0）回复(0）举报 4个月前

z4iuyo4d3#

您可以自定义引导徽章颜色与此.

.red {
  background-color: red;
  color: blue !important;
}

个字符

赞(0）回复(0）举报 4个月前

我来回答

为什么不能用css在bootstrap 4中改变badge类的颜色？

3条答案

相关问题

热门标签

最新问答