Bootstrap 3：如何修改切换时.active按钮的颜色？

首先咱们先修正HTML里的两个小细节，能让功能逻辑更完整：

1. 单选框的name属性要统一，这样才能实现单选互斥（你原来的代码里两个单选框name不同，单选逻辑本身是失效的）；
2. 初始状态只给一个按钮加active类，不然默认两个按钮都会显示激活状态，不符合单选的预期。

修正后的HTML代码：

<div class="btn-group">
  <a href="#price" class="btn btn-xs active" data-toggle="tab">
    <input type="radio" name="filter-option" id="price" value="1"> Price
  </a>
  <a href="#contact" class="btn btn-xs" data-toggle="tab">
    <input type="radio" name="filter-option" id="contact" value="0"> Contact
  </a>
</div>

接下来用纯CSS就能实现激活/非激活状态的样式区分：我们给.btn-group下的按钮设置默认灰色样式，再给带.active类的按钮应用Bootstrap Primary的蓝色样式即可。

/* 非激活状态按钮：默认灰色样式 */
.btn-group .btn {
  background-color: #ffffff;
  border-color: #cccccc;
  color: #333333;
  padding: 5px 10px; /* 和btn-xs的原生padding保持一致 */
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

/* 非激活按钮hover状态 */
.btn-group .btn:hover {
  background-color: #e6e6e6;
  border-color: #adadad;
  color: #333333;
  text-decoration: none;
}

/* 激活状态按钮：Primary蓝色样式 */
.btn-group .btn.active {
  background-color: #337ab7;
  border-color: #2e6da4;
  color: #ffffff;
}

/* 激活按钮hover状态 */
.btn-group .btn.active:hover {
  background-color: #286090;
  border-color: #204d74;
}

为什么这样可行？ #

• 完全通过自定义CSS实现，不需要额外的JS逻辑；
• 利用CSS优先级规则，.btn-group .btn.active会覆盖默认样式，确保激活状态的蓝色样式生效；
• 样式完全对齐Bootstrap原生按钮的视觉风格，不会出现违和感。

如果你的项目用了Bootstrap的Less/Sass变量，还可以用变量替代具体颜色值，让样式更统一：

.btn-group .btn.active {
  background-color: @btn-primary-bg;
  border-color: @btn-primary-border;
  color: @btn-primary-color;
}

内容的提问来源于stack exchange，提问作者user984621