Question

我已经设置了一个Bootstrap tab / pills nav的东西。我有3个标签：“采用”，“捐赠”并加入。我想要它，以便内容背景与活动选项卡的颜色匹配。

<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;
}

我认为我必须将它链接到ID（＃1a，＃2a，＃3a），但我没有找到让每个标签有不同颜色的方法。

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

Answer 1

不应将Numbers用作id=""属性的第一个字符，因此#exTab1 .tab-content > #2a CSS选择器不起作用。但是，您可以像这样选择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类现在应放在nav-link上，并相应地更新CSS。此外，以数字（1a，2a，3a等）开头的给定元素id=并不好。考虑将标签重命名为a1，a2，a3等...

Updated for Bootstrap 4.3.1 + Fill height

Answer 2

在这种情况下，每个标签应该有不同的颜色。因此，每个tab-pane都有一个特定的类来设置标签内容的特定颜色。将此代码添加到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 3

除了背景颜色修复之外，您还需要调整用于.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;

}

如何更改引导程序中每个药丸（标签）的标签内容颜色？

3 个答案: