2016-10-10 4 views
1

私はブートストラップ2.3.4ドロップダウンメニュー

<div class="container"> 
    <div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container-fluid"> 
     <div class="nav-no-collapse header-nav"> 
      <ul class="nav pull-left nav-tabs"> 
      <li class="dropdown"> 
       <a href="/Home"> 
       <i class="icon-bar-chart"></i></a> 
      </li> 
      <li class="dropdown"><a href="javascript:RefreshAll();" title="Refresh All"><i class="icon-refresh"></i></a> 
      </li> 
      <li><a href="#dev" data-toggle="tab">Development</a> </li> 
      <li><a href="#testing" data-toggle="tab">Testing</a> </li> 
      </ul> 
     </div> 
     </div> 
     <div class="container-fluid"> 
     <div class="tab-content"> 
      <div class="tab-pane fade" id="dev"> 
      <ul class="nav pull-left"> 
       <li class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dev</a> 
       <ul class="dropdown-menu"> 
        <li> 
        <a href="">Dev1</a> 
        <a href="">Dev2</a> 
        <a href="">Dev3</a> 
        </li> 
       </ul> 
       </li> 
      </ul> 
      </div> 
      <div class="tab-pane fade" id="testing"> 
      <ul class="nav pull-left"> 
       <li class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Staging</a> 
       <ul class="dropdown-menu"> 
        <li> 
        <a href="">Staging 1</a> 
        <a href="">Staging 2</a> 

        </li> 
       </ul> 
       </li> 
      </ul> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

しかし、そのが正しく

enter image description here

メニューが行くドロップダウンメニューが表示されないを使用して、ブートストラップタブとドロップダウンメニューを統合しようとしていますどこかにスクロールを入れます。

JSFIDDLE Demo

+0

下記参照:// getbootstrapを.com/2.3.2/javascript.html#dropダウン? –

+0

@ G.L.Pはい、HTMLで適用されたクラス 'dropdown-menu'を見てください – Billa

答えて

2

あなただけ

.tab-content{ 
    overflow:inherit !important; 
} 

のシンプルなラインを追加することで、あなたの問題を解決することができますは、http確認デモ

.tab-content{ 
 
    overflow:inherit !important; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/bootswatch/2.3.2/cerulean/bootstrap.min.css" rel="stylesheet"/> 
 
    <div class="container"> 
 
     <div class="navbar navbar-fixed-top"> 
 
      <div class="navbar-inner"> 
 
       <div class="container-fluid"> 
 
        <div class="nav-no-collapse header-nav"> 
 
         <ul class="nav pull-left nav-tabs"> 
 
          <li class="dropdown"><a href="/Home"> 
 
           <i class="icon-bar-chart"></i></a></li> 
 
          <li class="dropdown"><a href="javascript:RefreshAll();" 
 
           title="Refresh All"><i class="icon-refresh"></i></a> 
 
          </li> 
 
          <li><a href="#dev" data-toggle="tab">Development</a> </li> 
 
          <li><a href="#testing" data-toggle="tab">Testing</a> </li> 
 
         </ul> 
 
        </div> 
 
       </div> 
 
       <div class="container-fluid"> 
 
        <div class="tab-content"> 
 
         <div class="tab-pane fade" id="dev"> 
 
          <ul class="nav pull-left"> 
 
           <li class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown" 
 
            href="#">Dev</a> 
 
            <ul class="dropdown-menu"> 
 
             <li> 
 
             <a href="">Dev1</a> 
 
             <a href="">Dev2</a> 
 
             <a href="">Dev3</a> 
 
             </li> 
 
            </ul> 
 
           </li> 
 
          </ul> 
 
         </div> 
 
         <div class="tab-pane fade" id="testing"> 
 
          <ul class="nav pull-left"> 
 
           <li class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown" 
 
            href="#">Staging</a> 
 
            <ul class="dropdown-menu"> 
 
             <li> 
 
             <a href="">Staging 1</a> 
 
             <a href="">Staging 2</a> 
 
             
 
             </li> 
 
            </ul> 
 
           </li> 
 
          </ul> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

関連する問題