如何覆盖引导样式

Question

我该怎么做才能覆盖现有的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";
}

Answer 1

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

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

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

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

Answer 2

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

HTML

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

CSS

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

codepen