为什么bootstrap 3活动类不起作用?

时间:2014-07-23 06:51:48

标签: twitter-bootstrap

我有一个菜单。请参阅下面的

<nav role="navigation" class="navbar navbar-default">
               <div class="navbar-header">
                   <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                       <span class="sr-only">Toggle navigation</span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                   </button>
               </div>
               <div id="navbarCollapse" class="navbar-collapse collapse">

                   <ul class="nav navbar-nav">
                       <li><a href="#">welcome</a></li>
                       <li class="dropdown">
                           <a href="#" class="dropdown-toggle" data-toggle="dropdown">menu1<b class="caret"></b></a>
                       </li>
                       <li><a href="#">menu2</a></li>
                       <li><a href="#">menu3</a></li>
                       <li class="dropdown">
                           <a href="#" class="dropdown-toggle" data-toggle="dropdown">menu4<span class="caret"></span></a>
                           <ul class="dropdown-menu" role="menu">
                               <li><a href="#">menu4.1</a></li>
                               <li><a href="#">menu4.2</a></li>
                           </ul>
                       </li>
                       <li><a href="#">menu5</a></li>
                   </ul>
               </div>
           </nav>

我需要将活动菜单项显示为突出显示。但是&#34;活动&#34; class不起作用,菜单项不显示为活动状态。

我的代码遗漏了什么?

由于

1 个答案:

答案 0 :(得分:1)

示例中没有活动类,因此很难分辨出错误。一个常见的错误是将课程放在a而不是li上。它需要在li上。例如......

<li class="active"><a href="#">menu2</a></li>

Fiddle

如果它仍然不起作用,请发布相关的CSS或创建一个小提琴。