如何在中小型设备上将Bootstrap NavBar显示为折叠状态？

Question

我正在使用导航栏。 我已经看到，导航栏以移动大小或col-xs大小折叠。 但是我想让这个导航器在中小型设备上也崩溃了。 我怎样才能做到这一点。

可以从实际网站查询： https ： //dl.dropboxusercontent.com/u/86581418/consegna/blog.html

代码：

  <div class="col-md-7 col-sm-12 col-xs-12" style="padding-top: 40px;"> <nav role="navigation" class="navbar navbar-default navbar_top" > <div class="navbar-header" style="margin-top: -70px;"> <button type="button" data-target="#myNavbar" data-toggle="collapse" class="navbar-toggle" style="border-color:#fff;"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar" style="background-color:#fff;"></span> <span class="icon-bar" style="background-color:#fff;"></span> <span class="icon-bar" style="background-color:#fff;"></span> </button> </div> <div id="myNavbar" class="collapse navbar-collapse top_nav"> <nav class="nav_top"> <ul class="nav navbar-nav top_nav_block"> <li ><a href="#">HOME</a></li> <li><a href="gallery.html">GALLERY</a></li> <li class="active"><a href="blog.html">BLOG</a></li> <li><a href="about.html">ABOUT</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> </nav> </div> </nav> </div> 

Answer 1

从技术上讲，@ cvrebert的回答是正确的。 但是，您可能不像其他开发人员那样精通LESS 。 如果是这种情况，您可以添加一个自定义CSS文件，以便在包含bootstrap css文件后包含在<head> 。 在自定义CSS中，您可以添加其他媒体查询。 还有另一篇描述此问题的stackoverflow文章：在不使用LESS的情况下更改bootstrap navbar collapse breakpoint 。 该文章的答案将使您接近您想要的。 希望这可以帮助。

Answer 2

阅读文档？

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

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