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

あなたは2つの異なるものを混ぜています。ナビゲーションバーとタブには互換性がありません。を含めることは言うまでもなく、の.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>

ただし、このコードを混在させることはできません。

于 2012-09-06T08:00:12.230 に答える
1

実際、少し面倒な努力をすれば、できます。

navbar と tabbable を 2 つの異なるものとして作成します。nav.nav-tabs を非表示にします。次に、適切なタブを表示するスクリプトを navbar エントリに添付し、(完全を期すために) 選択した navbar エントリを強調表示します (Bootstrap は通常の navbar に対して行うものです)。

于 2012-10-24T16:44:09.777 に答える
0

ソリューションstyle="clear: both;"は.tab-content

于 2012-09-07T06:43:16.097 に答える