如何更改 Bootstrap 3 导航栏中活动选项卡的背景颜色?

esp*_*fee 2 javascript css twitter-bootstrap twitter-bootstrap-3

我有几个项目的导航栏。如果当前选择了每个选项卡,则会为其分配活动类。如果该类处于活动状态,我想为该选项卡设置背景颜色。这是示例:

div.admin-box {
	background-color: #E0E0E0;
}

.active a {
  background-color: #E0E0E0 !important;
}
Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#tab-1">Tab 1</a></li>
    <li><a data-toggle="tab" href="#tab-2">Tab 2</a></li>
    <li><a data-toggle="tab" href="#tab-3">Tab 3</a></li>
    <li><a data-toggle="tab" href="#tab-4">Tab 4</a></li>
</ul>
<div class="tab-content">
    <!-- Tab 1 -->
    <div id="tab-1" class="tab-pane fade in active admin-box">
      Tab 1 content.
    </div>
    <!-- Tab 2 -->
    <div id="tab-2" class="tab-pane fade admin-box">
      Tab 2 content
    </div>
    <!-- Tab 3 -->
    <div id="tab-3" class="tab-pane fade admin-box">
      Tab 3 content.
    </div>
    <!-- Tab 4 -->
    <div id="tab-4" class="tab-pane fade admin-box">
      Tab 4 content.
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

如您所见,每个选项卡容器都有背景颜色。因此选定的选项卡应具有相同的背景颜色以匹配容器背景。有没有办法通过纯 CSS 或 JS 来实现这一点?如果有人知道这样做的简单方法,请告诉我。

dys*_*unc 7

您需要修改 CSS .nav-tabs > li.active > a

.nav-tabs > li.active > a, 
.nav-tabs > li.active > a:focus, 
.nav-tabs > li.active > a:hover {
  background-color: red;
}
Run Code Online (Sandbox Code Playgroud)

您还可以修改 v3 中的 LESS 变量@navbar-default-link-active-bg@navbar-default-link-active-color

您应该在引导样式表包含或 sass 导入之后包含此 CSS 更改,以避免使用!important覆盖

不使用重要的演示