Bootstrap 3导航栏跳到两条线而不是折叠？

Question

想想我在这里错过了明显的东西，但是我有一个Bookstrap 3导航栏在桌面视图中工作得很好但是当我挤压宽度并且它达到平板电脑大小而不是折叠到切换菜单中时它就会被打开。将菜单跳到两行：

http://www.doorsets.org.uk/

我尝试通过媒体查询缩小导航栏中的文字大小，但是并没有解决它。

我错过了什么？ 欣赏它。谢谢。 NJ

Answer 1

一种解决方案可能是更改导航栏折叠的点，您可以通过创建customized Bootstrap并将@grid-float-breakpoint设置为更大的数字来执行此操作。

遗憾的是，此变量也会影响dt内的dd和.dl-horizontal，这可能是一个问题。

如果您想使用媒体查询来缩小font-size，则可以使用.navbar-default .navbar-nav > li > a选择器。然而，它需要在最小的视口大小变为9px，仍然保持在一行，这是非常难以理解的。

Answer 2

来自Bootstrap documentation：

  

溢出内容

     

由于Bootstrap不知道导航栏中的内容需要多少空间，因此您可能会遇到内容包装到第二行的问题。要解决此问题，您可以：

     

  
• 减少导航栏项目的数量或宽度。
  
• 使用自适应实用程序类隐藏某些屏幕尺寸的某些导航栏项目。
  
• 更改导航栏在折叠模式和水平模式之间切换的点。自定义@grid-float-breakpoint变量或添加您自己的媒体查询。
  

接着说：

  

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

     

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