0

我已经设置了一个 Bootstrap 选项卡/药丸导航的东西。我有 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链接，希望能解释我的意思。

4

3 回答 3

2

数字不应用作id=""属性的第一个字符，因此#exTab1 .tab-content > #2aCSS 选择器不起作用。但是，您可以像这样在 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 的更新

这是Bootstrap 4的一个工作示例。该类.active现在应该放置在 上，nav-link并且 CSS 会相应地更新。id=此外，给以数字开头的元素（1a、2a、3a 等）也不是好的做法。考虑将选项卡重命名为a1、a2、a3等...

针对 Bootstrap 4.3.1 + 填充高度更新

于 2018-05-02T14:05:03.940 回答
0

除了背景颜色修复之外，您还需要调整您使用的 CSS .tab-content。您的原始代码在父 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;

}
于 2018-05-02T14:02:06.073 回答
0

在这种情况下，每个选项卡应该有不同的颜色。所以每个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;
}
于 2018-05-02T13:59:42.443 回答