[英]Bootstrap nav pills - 'active' class doesn't work in opened modal
I have following code for nav-pills
component: 我对
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>
This is how the look of active a
is made (basically it's just a circle filled with special color): 这是主动
a
外观的方式(基本上只是一个充满特殊颜色的圆):
.form-steps > li.active > a {
background-color: #931f2a;
}
And here's code for a regular a
: 这是常规
a
的代码:
.promoter-form-steps > li > a {
border: 2px solid #931f2at;
height: 30px;
width: 30px;
border-radius: 100%;
}
I suppose that by adding .active
class to corresponding li
element makes a
element filled with color, but it doesn't when I open modal where this component is placed for the fist time. 我想,通过添加
.active
类对应li
元件使a
填充色元件,但是当我打开模态此组件放置拳头时间没有。 When I open modal for the second time after I click on another link, I see correct behavior, ie .active
class is filled with color. 当我单击另一个链接后第二次打开模式时,我看到正确的行为,即
.active
类充满了颜色。 It's an SPA and I have another nav-pills
like this with exact markup and it works just fine and I don't quite understand why this behavior doesn't work on second nav-pills
. 这是一个SPA,我还有另一个带有精确标记的
nav-pills
,它的工作原理还不错,而且我不太理解为什么这种行为不适用于第二个nav-pills
。 I double checked that class names and ids don't repeat each others and I am sure that no custom js was involved into this. 我再次检查了类名和ID是否不会重复,并且我确定没有自定义js参与其中。 Can you please give me a direction to inspect what I did wrong?
您能给我一个方向去检查我做错了什么吗? Thanks in advance!
提前致谢!
Here's the recommended format as determined by Twitter Docs: 这是Twitter Docs确定的推荐格式:
<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>
Your list tags need to have a class of nav-item and your anchors need a class of nav-link before it can use the active class 您的列表标签需要具有nav-item类,而锚点则需要具有nav-link类,然后才能使用活动类
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.