Question

我正在使用bootstrap 3，我无法弄清楚如何更改标签上的颜色。我的css中的某些内容使我的非活动标签在常规状态下完全变为白色，我所做的一切都不会覆盖它。

我正在使用这个建议： tab-left

让我的标签在左边，因为它不再是原生的。但如果我使用它，我所做的一切都不允许我在任何状态下更改我的标签颜色。

我的代码：

<div class="container">
  <div class="normal">
    <h2 style="text-align: center;">PRODUCTS + SERVICES</h2>
      <div class="tabbable tabs-left">
        <ul id="myTab" class="nav nav-tabs color">
          <li class="active"><a href="#data" data-toggle="tab">DATA MANAGEMENT<br>
            + ANALYTICS</a></li>
          <li><a href="#software" data-toggle="tab">CARE MANAGEMENT<br>SOFTWARE</a></li>
          <li><a href="#callcenter" data-toggle="tab">CARE<br>COORDINATION<br>+ NURSING<br>CALL CENTER</a></li>
          <li><a href="#financing" data-toggle="tab">FINANCING,<br>RISK POOLING<br>+ REINSURANCE</a></li>
          <li><a href="#contracting" data-toggle="tab">CONTRACTING</a></li>
          <li><a href="#admin" data-toggle="tab">ADMINISTRATION</a></li>
        </ul>
        <div id="myTabContent" class="tab-content">

          <div class="tab-pane fade in active" id="data">
            <p>TITLE</p>
        <p>copy copy</p>
          </div>

          <div class="tab-pane fade" id="software">
            <p>copy copy</p>
          </div>

          <div class="tab-pane fade" id="callcenter">
            <p>copy copy</p>
          </div>

          <div class="tab-pane fade" id="financing">
            <p>copy copy</p>
          </div>

          <div class="tab-pane fade" id="contracting">
            <p>copy copy</p>
          </div>

          <div class="tab-pane fade" id="admin">
            <p>copy copy</p> 
          </div>

        </div>

      </div>         <!--end of TABS-->

  </div>  <!--end of normal-->
</div>

CSS（我明白这有很多重复，但我想展示我到目前为止尝试的所有内容）

.tabs-left {
  .nav-tabs {
    border-bottom: 0;
  }


.tab-content > .tab-pane,{
  display: none;
}

.tab-content > .active,{
  display: block;
}

.tabs-left, .tabs-right
  > .nav-tabs > li {
    float: none;
  }
.tabs-left, .tabs-right
  > .nav-tabs > li> a {
      min-width: 74px;
      margin-right: 0;
      margin-bottom: 3px;
    }

.tabs-left > .nav-tabs {
  float: left;
  margin-right: 19px;
  border-right: 1px solid #ddd;
}

> li > a, a:hover, a:focus {
    margin-right: -1px;
    -webkit-border-radius: 4px 0 0 4px;
       -moz-border-radius: 4px 0 0 4px;
            border-radius: 4px 0 0 4px;
      border-color: #dddddd;
    }

  > .active a, a:hover, a:focus {
      border-color: #ddd transparent #ddd #ddd;
      *border-right-color: #fff;
    }
.tabs-left > .nav-tabs > li.active > a, a:hover, a:focus {
    background-color: #1a92c1;
    color: #ffffff;
    curser: default;
    border: none;
}

.tabs-left > .nav-tabs > li > a {
    color: #555555;
    curser: default;
    border-color: #ddd transparent #ddd #ddd;
    *border-right-color: #fff;

}

.tabs-left > .nav-tabs > li > a:hover, a:focus {
    color: #555555;
    background-color: #eeeeee;
    curser: default;
    border-color: #ddd transparent #ddd #ddd;
    *border-right-color: #fff;
}

.color .active a, 
.color .active a:hover,
.color .active a:focus {
        background-color: #1a92c1 !important;
    color: #ffffff !important;
    curser: default !important;
    border: none !important;
}

.color a {
    color: #555555 !important;
    border-color: #ddd transparent #ddd #ddd !important;
    *border-right-color: #fff !important;
}

.color a:hover, a:focus {
    color: #555555 !important;
    background-color: #eeeeee !important;
    border-color: #ddd transparent #ddd #ddd !important;
    *border-right-color: #fff !important;
}

我会接受任何和所有的建议 - 我真的在这里不知所措。谢谢！

Answer 1

所以这是错误

.tabs-left {  <--- extra brace -->
  .nav-tabs {
    border-bottom: 0;
  }

成功

.tabs-left .nav-tabs {
    border-bottom: 0;
  }

的 Demo

Here在bootply上使用原始内容

更改选项卡式左侧bootstrap3选项卡上的颜色

1 个答案: