如何在Bootstrap 3.3.7中强制使用汉堡菜单，即使是在桌面设备上？

Question

我的代码看起来跟这个页面一样：

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

当我在手机上打开页面时，它看起来像这样：

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

如何让页面在桌面上与在移动设备上一样？

也就是说，我希望在网站的桌面版上有一个汉堡菜单。

我尝试过的事情

• 我在页面的外部

  上设置了max-width=480px，但没有效果。

• 我还在softwarerecs SE上发布了一个相关问题(https://softwarerecs.stackexchange.com/questions/51989/a-css-framework-which-is-essentially-a-mobile-only-unresponsive-version-of-boo)，我认为这很荒谬（库是编程的固有组成部分，SO应该允许库问题！）。

- Alex R

Answer 1

来自 Bootstrap 文档:

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

当视口宽度小于 @grid-float-breakpoint 时，导航栏会折叠成垂直的移动设备视图， 而在至少为 @grid-float-breakpoint 的视口宽度下则扩展为水平的非移动设备视图。 调整 Less 源代码中的此变量以控制导航栏何时折叠/展开。默认值为768px（最小的“小屏幕” 或“平板电脑”屏幕尺寸）。

你可以使用这个自定义工具来自定义断点并编译它，或者仅编辑 variables.less 文件。

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

- Mason

Answer 2

这里是一个只使用css的示例。完全归原作者所有。

HTML

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Brand</a>
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <div class="navbar-header navbar-right">
        <p class="navbar-text">
        <a href="#" class="navbar-link">Username</a>
        </p>
    </div>
  </div>
</nav>

CSS

body {
    padding-top:70px;
}

.navbar-header {
  float: none;
}
.navbar-toggle {
  display: block;
}
.navbar-collapse.collapse {
  display: none!important;
}
.navbar-nav {
  float: none!important;
}
.navbar-nav>li {
  float: none;
}
.navbar-collapse.collapse.in{
  display:block !important;
}

- djnz