我正在使用twitter bootstrap创建可切换的标签。这是我正在使用的CSS:
<div class="container"> <ul class="nav nav-tabs"> <li><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> <li><a href="#messages" data-toggle="tab">Messages</a></li> <li><a href="#settings" data-toggle="tab">Settings</a></li> </ul> </div>
此html正确显示选项卡,但向左拉(应该发生)。我已经尝试过修改CSS,以使标签位于页面的中心位置,但还没有走运。我以为有更多CSS经验的人会知道该怎么做。
值得注意的是,还有一个关于定心导航药丸的问题,我尝试过,但它并不仅仅适用于简单的导航标签。
谢谢。
nav-tabs列表项会由引导程序自动浮动到左侧,因此您必须将其重置,而是将其显示为inline- block,对于居中菜单项,我们必须将属性添加text-align:center到容器中,如下所示:
nav-tabs
inline- block
text-align:center
的CSS
.nav-tabs > li, .nav-pills > li { float:none; display:inline-block; *display:inline; /* ie7 fix */ zoom:1; /* hasLayout ie7 trigger */ } .nav-tabs, .nav-pills { text-align:center; }