如何覆盖 Bootstrap 样式

Question

如何覆盖 Bootstrap

的现有 class

btn 和 activeclass 名称是从 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

如何覆盖 Bootstrap 样式

How to override a Bootstrap style

html

css

radiobuttonlist

twitter-bootstrap