Bootstrap 3 nav-pills，活动类仅在我单击指定元素后才起作用

Question

我有以下nav-pills组件的代码：

  <ul id="steps" class="nav nav-pills form-steps">
    <li class="active"><a data-toggle="pill" href="#options"></a></li>
    <li><a data-toggle="pill" href="#payments"></a></li>
  </ul>

这是我的tab-content，只是为了确保href和id相等：

  <div class="tab-content">
    <div class="tab-pane fade in active" id="options">
      <%= render 'options' %>
    </div>
    <div class="tab-pane fade" id="payments">
      <%= render 'payments' %>
    </div>
  </div>

这是active a的外观(基本上它只是一个用特殊颜色填充的圆圈)：

.form-steps > li.active > a {
    background-color: #931f2a;
}

下面是一个常规a的代码

.form-steps > li > a {
    border: 2px solid #931f2at;
    height: 30px;
    width: 30px;
    border-radius: 100%;
}

我假设通过向相应的li元素添加.active类来使a元素用颜色填充，但是当我第一次打开这个组件所在的模式时，它不会，要激活这个颜色，我必须单击链接，紧接着我的元素被填充。当我在点击另一个链接后第二次打开modal时，我看到了正确的行为，即.active类充满了颜色。这是一个nav-pills，我有另一个类似的带有精确标记的nav-pills，它工作得很好，我不太明白为什么这个行为不能在第二个SPA上工作。我仔细检查了类名和I是否彼此重复，并且我确信其中没有涉及自定义的js。你能给我一个方向来检查我做错了什么吗？提前感谢！

Answer 1

尝试添加这些css：

.form-steps > li.active > a:focus { background-color: #931f2a; }

.form-steps > li.active > a:active { background-color: #931f2a; }

.form-steps > li.active > a:visited { background-color: #931f2a; }