Как заставить меню гамбургеров в Bootstrap 3.3.7 даже для рабочего стола?

Question

Мой код выглядит так же, как эта страница:

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

Когда я открываю страницу в мобильном телефоне, она выглядит так:

Но когда я открываю его на рабочем столе, это выглядит так:

Как заставить страницу выглядеть так же на рабочем столе, как и на мобильном?

т.е. Я хочу меню гамбургера на настольной версии сайта.

Вещи, которые я пробовал

• Я установил max-width=480px на внешнем div на странице, но это не помогло.

• Я также опубликовал соответствующий вопрос на softwarerecs SE (https://softwarerecs.stackexchange.com/questions/51989/a-css-framework-which-is-essentially-a-mobile-only-unresponsive-version-of-boo),, кстати, я думаю, что это глупо (библиотеки свойственны программированию, и вопросы по библиотекам должны быть разрешены для SO!).

Answer 1

Вот пример только для 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;
}

Answer 2

Из Bootstrap Документация :

Изменение свернутой точки останова мобильной навигационной панели

Навбар рушится в его вертикальный мобильный вид, когда область просмотра уже, чем @ grid-float-breakpoint и расширяется до горизонтального немобильного вид, когда область просмотра имеет ширину не менее @ grid-float-breakpoint. Отрегулируйте эту переменную в источнике Less, чтобы контролировать, когда навигационная панель коллапсирует / расширяется. Значение по умолчанию - 768 пикселей (наименьшее «маленькое» или экран планшета).

Вы можете использовать этот инструмент настройки , чтобы настроить точку останова и скомпилировать ее или просто отредактировать variables.less

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