Как изменить порог коллапса навигационной панели с помощью загрузчика Twitter?

Question

Я использую Twitter Bootstrap 2.0.1 в проекте Rails 3.1.2, реализованном с помощью bootstrap-sass.Я загружаю файлы bootstrap.css и bootstrap-responsive.css, а также bootstrap-collapse.js Javascript.

У меня изменчивый макет с панелью навигации, похожей на пример .Это следует инструкциям "1008 * * здесь " навигационной панели.Он работает нормально: если страница уже примерно 940 пикселей, панель навигации сворачивается и отображает «кнопку», которую я могу нажать, чтобы развернуть ее.

Однако моя панель навигации выглядит хорошо до ширины около 550 пикселей, т.е.не нужно свернуть, если экран не очень узкий.

Как сказать Bootstrap свернуть панель навигации, только если ширина экрана меньше 550px?

Обратите внимание, что на этом этапе я не хочет изменить другие адаптивные поведения, например, наложение элементов вместо отображения их рядом.

Answer 1

Bootstrap 4.x

Это просто, чтобы изменить порог коллапса в Bootstrap 4.x.Существует 6 случаев:

1. Всегда расширяться, никогда не разрушаться (т. Е. Точка останова составляет 0px): <nav class="navbar navbar-expand">...</nav>
2. Точка останова составляет sm (576px): <nav class="navbar navbar-expand-sm">...</nav>
3. Точка останова мд (768 пикселей): <nav class="navbar navbar-expand-md">...</nav>
4. Точка останова lg (992 пикселя): <nav class="navbar navbar-expand-lg">...</nav>
5. Точка останова xl (1200px): <nav class="navbar navbar-expand-xl">.../nav>
6. Всегда сворачиваться, никогда не расширяться (т. Е. Точка останова ∞px).: <nav class="navbar">...</nav> (Просто удалите класс navbar-expand-*. Сначала с мобильного, как в Bootstrap 4.x)

Автор этой статьи Кэрол Скелли, которую я нашел https://medium.com/wdstack/examples-bootstrap-4-navbar-b3c9dc0edc1a

Answer 2

Просто запишите этот код в свой файл style.css и это будет работать

@media (min-width: 768px) and (max-width: 991px) {
        .navbar-collapse.collapse {
            display: none !important;
        }
        .navbar-collapse.collapse.in {
            display: block !important;
        }
        .navbar-header .collapse, .navbar-toggle {
            display:block !important;
        }
        .navbar-header {
            float:none;
        }
        .navbar-nav {
            float: none !important;
            margin: 0px;
        }
        .navbar-nav {
            margin: 7.5px -15px;
        }
        .nav > li {
            position: relative;
            display: block;
        }
        .navbar-nav > li {
            float: none !important;
        }
        .nav > li > a {
            position: relative;
            display: block;
            padding: 10px 15px;
        }
        .navbar-collapse {
            padding-right: 15px;
            padding-left: 15px;
            overflow-x: visible;
            border-top: 1px solid transparent;
            box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
        }
        .nav {
            padding-left: 0px;
            margin-bottom: 0px;
            list-style: outside none none;
        }
    }

Answer 3

Еще больше взломав Тайлера, добавив класс видимый телефон и класс скрытый телефон к элементу в основной складной навигации, вы можете «вытащить» одинили два свернутых элемента для отображения даже в навигационной панели телефона.

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="visible-tablet">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
      <div class="visible-phone">
        <ul class="nav">
          <li>Navigation 1</li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="hidden-phone">Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 4

Это отличный пример того, где вы можете использовать LESS-версию файлов Bootstrap CSS. Как это сделать ниже.

Еще лучше было бы подать это как запрос на загрузку на Github, чтобы каждый мог получить выгоду, и, надеюсь, ваш «пользовательский код» станет частью Bootstrap.

• Добавить переменную к variables.less, которая указывает, когда свернуть панель навигации. Что-то вроде: @navCollapseWidth: 979px
• Затем измените responsive-navbar.less ...
  • Верхняя смена @media (max-width: 979px) на @media (max-width: @navCollapseWidth)
  • Внизу изменить @media (min-width: 980px) на @media (max-width: @navCollapseWidth - 1)

Конечно ... вам придется скомпилировать LESS, используя один из предложенных методов .