Twitter引导程序:活动选项卡仍有下划线

Question

我正在使用twitter的Bootstrap css创建一个基本的选项卡导航，如"Basica选项卡"下所示。你会注意到活动选项卡没有下划线，这让它感觉像是在前台。当我使用完全相同的代码时，我的活动选项卡仍然有下划线，这确实会降低效率。

我在这里创建了一个JSFiddle：http://jsfiddle.net/s_d_p/nRB5t/1/

这是HTML:

<div class="row" style="width:960px;">          
        <ul class="nav nav-tabs span12">
            <li class="text-center active"><a href="howitworks.php" class="">HOW IT WORKS</a></li>
            <li class=" text-center"><a href="#" class=""><small>Login</small></a></li>
            <li class=" text-center"><a href="" class=""><small>Join</small></a></li>
        </ul>
    </div>

我做错什么了吗？

Answer 1

丢失<small>标记，它就可以正常工作。

Answer 2

正如Rob的回答，删除小标签会纠正它。如果你想保留样式，你可以更改非活动菜单项的锚样式上的字体大小（并将其设置为活动菜单项上的def 100%，使其保持正确的大小）：

.nav-tabs > li > a {
    font-size: 85%;
}
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
    font-size: 100%;
}

事实上，正如一些在线文章（和MDN页面）所表明的那样，<small>在HTML5中被重新使用，以表示精细印刷、版权和合法印刷以及旁注。因此，以上将是一种更合适的方式来实现你想要的造型。