如何更改 bootstrap 中每个药丸（选项卡）的选项卡内容颜色？

Question

我设置了 Bootstrap tab/pills 导航。我有 3 个选项卡："adopt"、"donate" 和加入。我想要它，以便内容背景与活动选项卡的颜色相匹配。

<div id="exTab1" class="container"> 

  <ul class="nav nav-pills">
    <li class="active"><a  class="adopt-tab" href="#1a" data-toggle="tab">ADOPT</a></li>
    <li><a class="donate-tab" href="#2a" data-toggle="tab">DONATE</a></li>
    <li><a class="join-tab" href="#3a" data-toggle="tab">JOIN</a></li>
  </ul>

</div>

到目前为止，我已经设法将其设置为每个药丸都有不同的颜色，并且第一个选项卡的内容与药丸的颜色相匹配。但是，其他选项卡的内容当前使用相同的颜色...

#exTab1 .tab-content {
  color : white;
  padding : 5px 15px;
  background-color: #EF476F;
}

我假设我必须 link 它到 ID (#1a, #2a, #3a) 但我还没有找到让每个选项卡具有不同颜色的方法。

这是一个 codepen link，希望能解释我的意思。

Answer 1

在这种情况下，每个选项卡应该有不同的颜色。所以每个 tab-pane 都有一个特定的 class 来为选项卡内容设置特定的颜色。将此代码添加到您的 CSS.

/** this changes needs in you existing CSS **/

#exTab1 .tab-content {
  color : white;
  padding : 0;
  background-color: #fff;
}


/*New css to add*/

.tab-pane.adopt-tab {
  background-color: #EF476F;
}
.tab-pane.donate-tab {
  background: #FF6663;
}
.tab-pane.join-tab {
  background-color: #FFD166;
}

Answer 2

除了背景颜色修复之外，您还需要调整用于 .tab-content 的 CSS。您的原始代码在父级 div 上设置了背景颜色，这在更改子级（即选项卡窗格）的背景时会导致问题。

.container {
  margin-top: 32px;
}


/* tab content */
#exTab1 .tab-content {
  color : white;
}
.tab-pane {
  padding : 5px 15px;
  background-color: #EF476F;
}
/* my attempt at individual tab styling */
#exTab1 .tab-content > #2a {
    background-color: #FF6663;
}



/* pills styling */
#exTab1 .nav-pills > li > a {
  border-radius: 0;
}
div#exTab1.container {
    padding-bottom: 64px;
}
li.active {
    background: #E9C46A;
}
.nav-pills > li > a.adopt-tab {
    color: #EF476F;
    border: none;
}
.nav-pills > li.active > a.adopt-tab {
    background-color: #EF476F;
    color: white;
    border: none;
}
.nav-pills > li > a.donate-tab {
    color: #FF6663;
    border: none;
}
.nav-pills > li.active > a.donate-tab, .tab-pane.donate-tab {
    background-color: #FF6663;
    border: none;
}
.nav-pills > li > a.join-tab {
    color: #FFD166;
    border: none;
}
.nav-pills > li.active > a.join-tab, .tab-pane.join-tab {
    background-color: #FFD166;
    border: none;
}





/*form stuff*/
form {
    padding: 32px;
}
label {
    font-family: 'Roboto', sans-serif !important;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: .05em;
}
input {
    border: none;
}
.input-group input {
    height: 40px;
}
.form-group select {
    height: 40px;
}
span.input-group-addon {
    border: none;
}
select {
    border: none;
}
.butn {
    display: inline-block;
    width: 80%;
    margin-bottom: 0;
    margin-top: 43.6px;
    height: 40px;
    background: none;
    border: 3px solid #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
    overflow: hidden;
    color: #fff;

}

Answer 3

数字不应用作 id="" 属性的第一个字符，因此 #exTab1 .tab-content > #2a CSS select 或不起作用。但是，您可以 select CSS 中的选项卡 ID 像这样...

https://www.codeply.com/go/uhGzMhFlQs

#exTab1 .tab-content > [id='1a']  {
    background-color: #EF476F;
}

#exTab1 .tab-content > [id='2a']  {
    background-color: #FF6663;
}

#exTab1 .tab-content > [id='3a']  {
    background-color: #FFD166;
}

更新 Bootstrap 4

这是一个有效的 example for Bootstrap 4。 .active class 现在应该放在 nav-link 上并且 CSS 会相应更新。此外，以数字（1a、2a、3a 等）开头的给定元素 id= 也不是好习惯。考虑将选项卡重命名为 a1、a2、a3 等...

Updated for Bootstrap 4.3.1 + Fill height

如何更改 bootstrap 中每个药丸（选项卡）的选项卡内容颜色？

How do I change the tab content color for each pill (tab) in bootstrap?

html

css

twitter-bootstrap

twitter-bootstrap-3

nav-pills