禁用Bootstrap 3导航栏以中等视口大小运行2行

Question

我的Bootstrap 3导航栏在大视口上是1行.然后,当我开始收缩浏览器窗口时,它会切换到2行,其中右侧内容("Hello username","Log off")位于第二行.

然后在更多调整大小后,它再次变为1行,菜单项消失,菜单按钮仅出现.

我如何跳过2行阶段？

Answer 1

对于它的价值,这里有一个想法,使导航栏项目根据当前的响应大小从文本变为图标.

<li><a href="#contact"><div class="hidden-sm">Contact<b class="caret"></b></div><span class="glyphicon glyphicon-plus visible-sm"></span></a></li>

结果是"联系人"文本转换为小尺寸的加号图标.这是一个bootply示例

Answer 2

折叠导航栏,仅菜单按钮和水平2或1行导航栏之间的点(屏幕宽度)由grid-float-breakpoint定义.

将此值设置为更高的值,默认值为768px将跳过2行fase.尝试992px,中等网格的边界.

要更改grid-float-breakpoint,您将有两个选项:

• 从github下载源代码,更改@grid-float-breakpointvariables.less并重新编译bootstrap
• 使用自定义程序并下载您自己的副本

另见:https://stackoverflow.com/a/18944192/1596547

UPDATE

由cvrebert在https://github.com/twbs/bootstrap/issues/11539#issuecomment-28805244上:

你的选择是:

• 更改网格浮点断点,以便导航栏保持折叠状态,直到屏幕宽度足以容纳您的大导航栏
• 使用响应实用程序类来隐藏较窄屏幕宽度的导航栏的某些部分,以便它适合这些宽度
• 重做导航栏项目,使它们更短/更简洁