引导导航丸 - “主动”类开启模式不起作用

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> 

这是多么的活跃a的外观是由（基本上这只是填补了一圈用特殊颜色）：

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

下面是一个经常a代码：

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

我猜想通过添加.active类到相应的li元素使得a元素充满了颜色，但是当我打开第一次放置此元件的模式时，它不会。当我点击另一个链接后第二次打开模态时，我看到正确的行为，即.active类中充满了颜色。这是一个SPA，我有另一个nav-pills这样的确切标记，它的工作原理很好，我不明白为什么这种行为不适用于第二个nav-pills。我再次检查了类名和ID不重复，我相信没有自定义js参与到这个。 你能给我一个方向来检查我做错了什么吗？提前致谢！

Answer 1

这里是由Twitter的文件确定的推荐格式：

<ul class="nav nav-pills"> 
    <li class="nav-item"> 
    <a class="nav-link active" href="#">Active</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" href="#">Link</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" href="#">Link</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link disabled" href="#">Disabled</a> 
    </li> 
</ul> 

你的列表标记都需要有一个类导航项和你的锚需要一个类导航链接的，才可以使用活动类