首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Twitter bootstrap -带有选项卡的导航栏不起作用

Twitter bootstrap -带有选项卡的导航栏不起作用
EN

Stack Overflow用户
提问于 2012-09-06 15:47:33
回答 3查看 4.4K关注 0票数 1

我正在尝试向.navbar中添加标签,但是.tab-content没有在标签下面显示,而是在它旁边显示。当我删除.navbar类标签时,它工作正常(内容在标签下面),所以.navbar类有些问题。有人知道问题出在哪里吗?

下面是代码:

代码语言:javascript
代码运行次数:0
运行
复制
<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 -->  
EN

回答 3

Stack Overflow用户

发布于 2012-09-06 16:00:12

你混合了两种不同的东西。导航栏和选项卡不兼容。您不能在.navbar中包含.nav-tabs,更不用说包含.tab-panes了。

您可以使用以下命令获取导航栏

代码语言:javascript
代码运行次数:0
运行
复制
<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>

或者,您可以使用以下命令获得选项卡式导航

代码语言:javascript
代码运行次数:0
运行
复制
<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>

但是你不能混合这段代码。

票数 2
EN

Stack Overflow用户

发布于 2012-10-25 00:44:10

实际上,通过一些恼人的努力,您可以。

创建两个截然不同的东西:导航栏和标签页。隐藏nav.nav-tab。然后将脚本附加到导航栏条目以显示相应的选项卡,并(为了完整)突出显示所选的导航栏条目( Bootstrap对普通导航栏执行的操作)。

票数 1
EN

Stack Overflow用户

发布于 2012-09-07 14:43:16

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/12295291

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档