我正在尝试向.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 -->
发布于 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>
但是你不能混合这段代码。
发布于 2012-10-25 00:44:10
实际上,通过一些恼人的努力,您可以。
创建两个截然不同的东西:导航栏和标签页。隐藏nav.nav-tab。然后将脚本附加到导航栏条目以显示相应的选项卡,并(为了完整)突出显示所选的导航栏条目( Bootstrap对普通导航栏执行的操作)。
发布于 2012-09-07 14:43:16
解决方案是针对.tab-content
的style="clear: both;"
https://stackoverflow.com/questions/12295291
复制相似问题