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>

你的列表标签需要有一类nav-item，你的锚点需要一类nav-link才能使用活动类

Bootstrap导航丸 - '主动'类在打开的模态中不起作用

1 个答案: