如何覆盖 Bootstrap 样式答案

【问题标题】：How to override a Bootstrap style如何覆盖 Bootstrap 样式
【发布时间】：2017-07-16 06:07:34
【问题描述】：

如何覆盖现有的 Bootstrap 类

btn 和 active 类名称是从 Bootstrap 自动添加的。我想要插图上的特定颜色。

        <div class="categories">
            <label class="ng-binding">Categories</label>
            <div class="btn-group" data-toggle="buttons">
                  <label class="btn active">
                    <input type="radio" name="cat" id="rbOption1"> Cat 1
                  </label>
                  <label class="btn">
                    <input type="radio" name="cat" id="rbOption2"> Cat 2
                  </label>
            </div>
        </div>

我一直在尝试这样做，但没有积极的结果

.categories label#active {
    box-shadow: inset 0 3px 5px blue !important";
}

【问题讨论】：

伪类不应该带有“：”吗？查看您的 css .categories label#active 。除非您尝试访问“活动”类，否则它将是 .active，而不是 #active
best way to override bootstrap css的可能重复
@JoeB。我也试过标签：活动。没有成功。标签#btn：活动。也没有成功
它是 .active 并删除 " codepen.io/mcoker/pen/owOgMV
谢谢你，我没有意识到我的风格有一个“。现在去看眼科医生。

标签： html css twitter-bootstrap radiobuttonlist

【解决方案1】：

根据我对问题的理解，这是您必须执行的操作才能覆盖 Bootstrap 样式。

.categories .btn.active {
   box-shadow:inset 0 3px 5px blue;
 }

如果您想在整个应用程序或页面中使用相同的样式，

.btn.active {
   box-shadow:inset 0 3px 5px blue;
}

【讨论】：

我也试过了，但 F12 开发工具将我的样式显示为无效的属性值，并带有一个警告图标，所有样式都被选中。
其他人指出了我的错误。我的风格末尾有一个“。谢谢您的回答
哈哈。 :) 我已经看到了，但我认为这是从您的源代码复制粘贴代码时的错字。顺便说一句，除非您没有其他解决方法，否则您不应使用 !important。
你是对的。感谢您的评论，我现在要去眼科医生。大声笑！

【解决方案2】：

您可以在标签上放置一个 id。

HTML

<label id="active" class="btn">

CSS

#active {
 box-shadow: inset 0px 0px 10px #FF0000;
}

codepen

【讨论】：