Bootstrap 3 导航栏跳到两行而不是折叠? [英] Bootstrap 3 navbar jumping onto two lines rather than collapsing?

问题描述

认为我在这里遗漏了明显的内容，但是我有一个 Bookstrap 3 导航栏，它在桌面视图中运行良好，但是当我挤压宽度并且它达到平板电脑大小而不是折叠到切换菜单时，它会将菜单跳到两个行:

Think I'm missing the obvious here, but I have a Bookstrap 3 navbar that works great in desktop view but as I squeeze the width and it gets to tablet size rather than collapsing into the toggle menu it's jumping the menu onto two lines:

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

我曾尝试通过媒体查询减小导航栏中的文本大小，但这并不能解决问题.

I've tried reducing the text size in the navbar via a media query but that isn't solving it.

我错过了什么?欣赏它.谢谢你.新泽西

What am I missing? Appreciate it. Thank you. NJ

推荐答案

来自 Bootstrap 文档:

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

Overflowing content

Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:

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

• Reduce the amount or width of navbar items.
• Hide certain navbar items at certain screen sizes using responsive utility classes.
• Change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.

接着说:

当视口比 @grid-float-breakpoint 窄时，导航栏会折叠为其垂直移动视图，而当视口至少为 @ 时，导航栏会扩展为其水平非移动视图grid-float-breakpoint 的宽度.在 Less 源中调整此变量以控制导航栏何时折叠/展开.默认值为 768px(最小的小"或平板"屏幕).

Changing the collapsed mobile navbar breakpoint

The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).

这篇关于Bootstrap 3 导航栏跳到两行而不是折叠?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！