2016-06-16 5 views
0

でナビゲーションバーのように私は、ブートストラップでのナビゲーションバーのデフォルトなどのモバイル機器でのnav-タブcollpasableを作りたくなります。ここで試してみてください:はNAV-タブが折りたたみ式だけで、ブートストラップ

<ul id="accountNav" class="account-nav nav nav-tabs" role="tablist"> 
    <li class="active"> 
     <a href="external-page.html" >External link 1</a> 
    </li> 
    <li> 
     <a href="external-page.html">External link 2</a> 
    </li> 
    <li> 
     <a href="external-page.html">External link 3</a> 
    </li> 
    <li> 
     <a href="external-page.html">External link 4</a> 
    </li> 
    <li> 
     <a href="external-page.html" >External link 5</a> 
    </li> 
    <li> 
     <a href="external-page.html">External link 6</a> 
    </li> 
</ul> 

https://jsfiddle.net/7d3mxv3a/1/は、私はこれをしたい: ここに行くenter image description here

+0

: //jsfiddle.net/7d3mxv3a/2/ –

+0

はい、しかし私のタブで –

+0

私はy私のフィドルのタブ... –

答えて

0

...彼らは...今折りたたみ式です

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<nav class="navbar navbar-default"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#">Project name</a> 
 
      </div> 
 
      <div id="navbar" class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="#">Home</a></li> 
 
       <li> <a href="external-page.html" >External link 1</a></li> 
 
       <li><a href="external-page.html">External link 2</a></li> 
 
       <li > 
 
       <a href="external-page.html">External link 3</a> </li> 
 
       
 
       <li> <a href="external-page.html">External link 4</a></li> 
 
       <li><a href="external-page.html" >External link 5</a></li> 
 
       <li class="dropdown"> 
 
       <a href="external-page.html">External link 6</a> </li> 
 
      </ul> 
 
      
 
      </div><!--/.nav-collapse --> 
 
     </div><!--/.container-fluid --> 
 
     </nav>
このHTTPSよう

関連する問題