Twitter bootstrap -带有选项卡的导航栏不起作用
Twitter bootstrap -带有选项卡的导航栏不起作用
提问于 2012-09-06 15:47:33
我正在尝试向.navbar中添加标签，但是.tab-content没有在标签下面显示，而是在它旁边显示。当我删除.navbar类标签时，它工作正常(内容在标签下面)，所以.navbar类有些问题。有人知道问题出在哪里吗？
下面是代码：
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="brand" href="/system/default/">Home</a>
<div class="nav-collapse subnav-collapse">
<div id="snippet--mainMenu">
<ul class="nav nav-tabs">
<li class=""><a href="#tab1" data-toggle="tab">Analyze</a></li>
<li class=""><a href="#tab2" data-toggle="tab">Portfolio</a></li>
<li class=""><a href="/system/search/" >Search</a></li>
</ul>
<div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
<div class="tab-pane" id="tab1">
<ul>
<li style="display: inline;list-style-type: none;"><a href="/system/analyze/builder">Builder</a></li>
<li style="display: inline;list-style-type: none;"><a href="/system/analyze/history">History</a></li>
<li style="display: inline;list-style-type: none;"><a href="/system/analyze/optimize">Optimize</a></li>
</ul>
</div>
<div class="tab-pane" id="tab2">
<ul>
<li style="display: inline;list-style-type: none;"><a href="/system/portfolio/list">Table List</a></li>
<li style="display: inline;list-style-type: none;"><a href="/system/portfolio/watchlist">Watchlist</a></li>
<li style="display: inline;list-style-type: none;"><a href="/system/portfolio/temporary">Temporary</a></li>
</ul>
</div>
</div>
</div>
<div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-user"></i> User<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/system/user/">Profile</a></li>
<li class="divider"></li>
<li><a href="/system/default/logout">Sign Out</a></li>
</ul>
</div>
</div><!-- /.nav-collapse -->
</div><!-- /.container-fluid -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar --> 回答 3
Stack Overflow用户
发布于 2012-09-06 16:00:12
你混合了两种不同的东西。导航栏和选项卡不兼容。您不能在.navbar中包含.nav-tabs，更不用说包含.tab-panes了。
您可以使用以下命令获取导航栏
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>或者，您可以使用以下命令获得选项卡式导航
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>但是你不能混合这段代码。
Stack Overflow用户
发布于 2012-10-25 00:44:10
实际上，通过一些恼人的努力，您可以。
创建两个截然不同的东西:导航栏和标签页。隐藏nav.nav-tab。然后将脚本附加到导航栏条目以显示相应的选项卡，并(为了完整)突出显示所选的导航栏条目( Bootstrap对普通导航栏执行的操作)。
Stack Overflow用户
发布于 2012-09-07 14:43:16
解决方案是针对.tab-content的style="clear: both;"
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12295291
复制相关文章
相似问题
腾讯云开发者
