nav-堆栈大但水平低于768 at

Question

我使用的是TBS，我有三个列，导航堆在左边，内容在中间，推特在右边。我想要实现的是，导航从大分辨率叠加，然后在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

我不确定是否可以使用引导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