即使对于桌面，如何在 Bootstrap 3.3.7 中强制使用汉堡菜单? [英] How to force hamburger menu in Bootstrap 3.3.7 even for Desktop?

问题描述

我的代码看起来和这个页面一样:

但是当我在桌面上打开它时，它看起来像这样:

如何强制页面在桌面上的外观与在移动设备上的外观相同?

即我想要网站桌面版的汉堡菜单.

我尝试过的东西

• 我在页面的外部 div 上设置了 max-width=480px，但这没有帮助.

• 我还在 softwarerecs SE (https://softwarerecs.stackexchange.com/questions/51989/a-css-framework-which-is-essentially-a-mobile-only-unresponsive-version-of-boo)，顺便说一句，我认为这很愚蠢(库是编程的固有特性，因此应该允许库问题！).

解决方案

来自 Bootstrap 文档:

<块引用>

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

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

您可以使用这个自定义工具来自定义断点并进行编译或者只是编辑 variables.less

@grid-float-breakpoint: 你的断点

My code looks the same as this page:

https://getbootstrap.com/docs/3.3/examples/navbar/

When I open the page in mobile, it looks like this:

But when I open it on Desktop, it looks like this:

How can I force the page to look the same on Desktop as it does on Mobile?

i.e. I want a hamburger menu on the desktop version of the site.

Things I have tried

• I set a max-width=480px on the outer div on the page, but that didn't help.

• I have also posted a related question on the softwarerecs SE (https://softwarerecs.stackexchange.com/questions/51989/a-css-framework-which-is-essentially-a-mobile-only-unresponsive-version-of-boo), which BTW I think is silly (libraries are intrinsic to programming and library questions should be allowed on SO!).

解决方案

From Bootstrap documentation:

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).

you can use this customization tool to customize the breakpoint and compile it or just edit variables.less

@grid-float-breakpoint:   YOUR-BREAK-POINT

这篇关于即使对于桌面，如何在 Bootstrap 3.3.7 中强制使用汉堡菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！