禁用 Bootstrap 3 导航栏以中等视口大小移动 2 行 [英] Disable Bootstrap 3 navbar going 2 rows in medium viewport size
问题描述
我的 Bootstrap 3 导航栏在大视口上是 1 行.然后当我开始缩小浏览器窗口时，它切换到 2 行，其中正确的内容(Hello username"、Log off")在第二行.
My Bootstrap 3 navbar is 1 row on a large viewport. Then when I start to shrink the browser window, it switches to 2 row, where the right content ("Hello username", "Log off") is in the second row.
然后再次调整大小后，它再次变为 1 行，菜单项消失，仅显示菜单按钮.
Then after more resize, it becomes 1 row again with the menu items disappeared and the menu button present only.
如何跳过 2 行阶段?
How can I skip the 2 row phase?
推荐答案
折叠导航栏、仅菜单按钮和水平 2 或 1 行导航栏之间的点(屏幕宽度)由 grid-float-breakpoint 定义.
The point (screen width) between the collapsed navbar, menu button only and the horizontal 2 or 1 row navbar is defined by the grid-float-breakpoint.
将此值设置为更高的值，默认值为 768px 将跳过第 2 行.试试 992px，中等网格的边界.
Set this value to a higher value, default value is 768px will skip the 2 row fase. Try 992px, the boundary of the medium grid.
要更改 grid-float-breakpoint，您将有两个选择:
To change grid-float-breakpoint you will have two option:
- 从github下载源码，修改
@grid-float-breakpoint在 variables.less 中并重新编译引导程序 - 使用 customizer 并下载您自己的副本
- download the source from github, change
@grid-float-breakpointin variables.less and recompile bootstrap - use the customizer and download you own copy
另见:https://stackoverflow.com/a/18944192/1596547
更新
由 cvrebert 在 https://github.com/twbs/bootstrap/issues/11539#issuecomment-28805244:
by cvrebert on https://github.com/twbs/bootstrap/issues/11539#issuecomment-28805244:
您的选择是:
- 更改网格浮动断点，使导航栏保持折叠状态，直到屏幕宽度足以容纳大导航栏
- 使用响应性实用程序类以较窄的屏幕宽度隐藏导航栏的某些部分，以便它适合这些宽度
- 重新设计您的导航栏项目，使其更短/更简洁
- change the grid float breakpoint so that the navbar stays collapsed until the screen is wide enough for your big navbar
- use responsive utility classes to hide some parts of the navbar at narrower screen widths so that it fits at those widths
- rework your navbar items so that they're shorter / less verbose
这篇关于禁用 Bootstrap 3 导航栏以中等视口大小移动 2 行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
