nav-stack大但水平低於768px

Question

我使用的是TBS，我有三列，左側是nav-stacked，中間是內容，右側是twitter。我想要實現的目的是導航從大分辨率堆疊起來，然後在768或更低的水平上移動，然後在出現菜單切換時重新堆疊。

下面是我使用的html，我只是使用標準的Boostrap三個樣式表。

 <nav class="navbar navbar-default " role="navigation"> 
       <div class="navbar-header"> 
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span 
          class="icon-bar"></span><span class="icon-bar"></span></button> 
       </div> 
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
        <ul class="nav nav-tabs nav-stacked" style="font-weight: bold; font-size: 16px"> 
         <li><a href="#Fencing">Home</a></li> 
         <li><a href="#Fencing">Beers and Ales</a></li> 
         <li><a href="#Fencing">Eating</a></li> 
         <li><a href="#Fencing">What's On</a></li> 
         <li><a href="#Fencing">Find Us</a></li> 
         <li><a href="#Fencing">Contact Us</a></li> 
        </ul> 
       </div> 
      </nav> 

Answer 1

我不知道如果可能的bootsrap CSS，但如果你打開使用jQuery，那麼你可能可以通過刪除和添加基於寬度類來實現它。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> 


<script type="text/javascript"> 
$(window).resize(function() 
{ if ($(window).width() <= 1000) 
{ if ($(".nav").hasClass("nav-stacked")) 
{ $('.nav').removeClass('nav-stacked'); } 
} else 
{ if (!$(".nav").hasClass("nav-stacked")) 
{ $('.nav').addClass('nav-stacked'); 
} } 
});</script>' 


    <nav class="navbar navbar-default " role="navigation"> 
       <div class="navbar-header"> 
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span 
          class="icon-bar"></span><span class="icon-bar"></span></button> 
       </div> 
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
        <ul class="nav nav-tabs nav-stacked" style="font-weight: bold; font-size: 16px"> 
         <li><a href="#Fencing">Home</a></li> 
         <li><a href="#Fencing">Beers and Ales</a></li> 
         <li><a href="#Fencing">Eating</a></li> 
         <li><a href="#Fencing">What's On</a></li> 
         <li><a href="#Fencing">Find Us</a></li> 
         <li><a href="#Fencing">Contact Us</a></li> 
        </ul> 
       </div> 
      </nav> 

http://www.bootply.com/uK0UrlBTKL