1

我正在尝试将标签添加到.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 -->
4

3 回答 3

2

你正在混合两种不同的东西。导航栏和选项卡不兼容。你不能包含.nav-tabs在 a.navbar中，更不用说包含.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-09-06T08:00:12.230 回答
1

实际上，通过一些烦人的努力，你可以。

将您的导航栏和标签页创建为 2 个不同的东西。隐藏 nav.nav 选项卡。然后将脚本附加到导航栏条目以显示适当的选项卡并（为了完整起见）突出显示选定的导航栏条目（Bootstrap 将为普通导航栏做的事情）。

于 2012-10-24T16:44:09.777 回答
0

解决方案是style="clear: both;"针对.tab-content

于 2012-09-07T06:43:16.097 回答