Question

我正在设计一个使用bootstrap的网页，其中正在使用导航栏，我尝试使用3个小节按钮并在按钮上单击打开菜单项并使用以下代码关闭相同的操作

<a id="menu-toggle" href="#menu-toggle" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>   
<div class="navbar navbar-inverse navbar-fixed-top">
     <div class="container">
        <div class="navbar-header">
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
             <a href="#" class="navbar-brand"> Brand</a>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
           <ul class="nav navbar-nav">
              <li> <a href="#">Home</a></li>
              <li> <a href="#">Dashboard</a></li>
              <li> <a href="#">Resources</a></li>
              <li> <a href="#">Contact Us</a></li>
              <li><a href="#loginModal" data-toggle="modal" >Login</a></li>

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

使用上面的内容，当窗口处于最大尺寸时显示完整导航，只有当窗口尺寸减小时才能看到三个条形。如何将三个条形对齐到右上角并在单击时显示菜单项？

样本： Fiddle

Answer 1

这是你在找什么？

来自http://getbootstrap.com/components/#navbar：

更改折叠的移动导航栏断点

当视口比@grid-float-breakpoint窄时，导航栏会折叠到其垂直移动视图中，并且当视口的宽度至少为@grid-float-breakpoint时，会扩展为其水平非移动视图。在Less source中调整此变量以控制导航栏折叠/展开的时间。默认值为768px（最小的＆＃34;小＆＃34;或＆＃34;平板电脑＆＃34;屏幕）。

导航切换仅在最小化窗口时可见

1 个答案:

更改折叠的移动导航栏断点