Question

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

Answer 1

你混合了两件不同的东西。导航栏和选项卡不兼容。您不能在.nav-tabs中加入.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>

但你不能混合这段代码。

Answer 2

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

创建导航栏＆amp;你可以看到两个截然不同的东西。隐藏nav.nav-tabs。然后将脚本附加到导航栏条目以显示相应的选项卡，并且（为了完整性）突出显示所选的导航栏条目（Bootstrap将为普通导航栏执行的操作）。

Answer 3

style="clear: both;"

的解决方案为.tab-content

Twitter引导程序 - 带有选项卡的Navbar不起作用

3 个答案: