Как изменить порог коллапса navbar с помощью Twitter bootstrap-responsive?

Bootstrap > 2.1 & &

• используйте меньшую версию bootstrap
• измените переменную @navbarCollapseWidth в переменных.меньше
• перекомпиляции.

обновление 2013: простой способ

• посещение http://getbootstrap.com/customize/#less-variables
• изменить @navbarCollapseWidth в поле формы
• Нажмите кнопку "скомпилировать и Загружать."

(THX в Archonic через комментарий)

обновление 2014: Bootstrap 3.1.1 и 3.2 (они даже добавил его в документации)

если вы настройка или переопределение/редактирования .less переменные, которые вы ищете:

//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);

вы можете установить новый @media запрос чтобы отбросить элементы navbar вниз, как вы считаете нужным, все, что вам нужно сделать, это сбросить первый, чтобы разместить новый запрос с требуемой шириной падения. Возьмите это, например:

CSS

/** Modified Responsive CSS **/

@media (max-width: 979px) {
    .btn-navbar {
        display: none;
    }
    .navbar .nav-collapse {
        clear: none;
    }

    .nav-collapse {
        height: auto;
        overflow: auto;
    }

    .navbar .nav {
        float: left;
        margin: 0 10px 0 0;
    }

    .navbar .brand {
        margin-left: -20px;
        padding: 8px 20px 12px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: block;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 0;
        color: #999999;
        font-weight: normal;
        padding: 10px 10px 11px;
    }

    .navbar .nav > li {
        float: left;
    }

    .navbar .dropdown-menu {
        background-clip: padding-box;
        background-color: #FFFFFF;
        border-color: rgba(0, 0, 0, 0.2);
        border-radius: 0 0 5px 5px;
        border-style: solid;
        border-width: 1px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        display: none;
        float: left;
        left: 0;
        list-style: none outside none;
        margin: 0;
        min-width: 160px;
        padding: 4px 0;
        position: absolute;
        top: 100%;
        z-index: 1000;
    }

    .navbar-form, .navbar-search {
        border:none;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: left;
        margin-bottom: 0;
        margin-top:6px;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: right;
        margin-left: auto;
    }
}

@media (max-width: 550px) {
    .btn-navbar {
        display: block;
    }
    .navbar .nav-collapse {
        clear: left;
    }

    .nav-collapse {
        height: 0;
        overflow: hidden;
    }

    .navbar .nav {
        float: none;
        margin: 0 0 9px;
    }

    .navbar .brand {
        margin: 0 0 0 -5px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: none;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 3px 3px 3px 3px;
        color: #999999;
        font-weight: bold;
        padding: 6px 15px;
    }

    .navbar .nav > li {
        float: none;
    }

    .navbar .dropdown-menu {
        background-color: transparent;
        border: medium none;
        border-radius: 0 0 0 0;
        box-shadow: none;
        display: block;
        float: none;
        left: auto;
        margin: 0 15px;
        max-width: none;
        padding: 0;
        position: static;
        top: auto;
    }

    .navbar-form, .navbar-search {
        border-bottom: 1px solid #222222;
        border-top: 1px solid #222222;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: none;
        margin: 9px 0;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: none;
        margin-left: 0;
    }

}

в следующем коде вы можете увидеть, как я включил оригинал @media запрос, который обрабатывает падение перед 979px Марк и новый запрос для поддержки желаемой точки падения 550px. Я изменил оригинал запрос прямо из css, реагирующего на bootstrap, чтобы сбросить все стили, примененные к этому конкретному запросу для элементов navbar, и перенести их в новый запрос, который несет нужную вам точку сброса. Таким образом, мы можем переключать все стили от исходного запроса до нового запроса, не вмешиваясь в таблицу стилей, реагирующую на bootstrap, таким образом, значения по умолчанию будут по-прежнему применяться к другим элементам в вашем документе.

вот короткая демонстрация с медиа-запросом установите падение на 550px как вы требуете: http://jsfiddle.net/wU8MW/

Примечание: я разместил выше модифицированных @media запросы ниже фрейма css, поскольку новый измененный css должен быть загружен первым, чем отзывчивый css.

bootstrap-sass будет поддерживать переменную $navbarCollapseWidth в следующей версии (2.2.1.0). Вы сможете обновить его, чтобы сделать именно то, что вы хотите, как только эта версия будет жить!

по состоянию на август 2013 года, Bootstrap 3 "Настройка и загрузка" страница может быть найдена в http://getbootstrap.com/customize/

с Bootstrap 3, соответствующая переменная @grid-float-точка останова.

Следующая страница переполнения стека содержит дополнительные сведения:Bootstrap 3 Navbar Collapse

Я подозреваю (и надеюсь), это будет реализовано в ближайшее время официально. Тем временем я просто делаю простой CSS-Хак, используя visible-phone на раскрывающейся кнопке и visible-tablet на втором наборе кнопок, которые я разместил в navbar. Так что раньше это выглядело так:

<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" 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="nav-collapse">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

и теперь это выглядит так:

<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="nav-collapse">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

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

Я создал отдельный файл SCSS, в котором перечислены все частичные файлы, необходимые для начальной загрузки, таким образом, я могу включать и выключать частичные файлы в зависимости от потребностей нашего сайта. Таким образом, я могу легко переопределить переменную точки останова. Вот что я получил:

// Core variables and mixins
$grid-float-breakpoint: 991px;
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset
@import "bootstrap/normalize";
//@import "bootstrap/print";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
//@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/glyphicons";
@import "bootstrap/dropdowns";
//@import "bootstrap/button-groups";
//@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
//@import "bootstrap/jumbotron";
//@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
//@import "bootstrap/progress-bars";
//@import "bootstrap/media";
//@import "bootstrap/list-group";
@import "bootstrap/panels";
//@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
//@import "bootstrap/popovers";
//@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";

вот мой код (все другие решения показали фанки полосу прокрутки, как навигационная панель упала вниз, поэтому я отредактировал код, так что это не так). Я не мог опубликовать другой ответ, поэтому я сделаю это здесь, чтобы другие могли найти. Я использую rails, чтобы сделать это с Bootstrap 3.0.

assets/stylesheets / framework и переопределяет вставить это: (отрегулируйте максимальную ширину до любого значения для достижения своей цели.)

@media (max-width: 2500px) {
.navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-collapse.collapse.in {
    display: block!important;
}
.navbar-nav {
    float: none!important;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}

Bootstrap 3.x

используя меньше, вы можете изменить значение @screen-small для таргетинга вашего минимального размера

пример: @screen-small: 600px;

Я использую это только для переключения в режим "крошечного устройства", когда ширина меньше 600px

Bootstrap 3.x

используя SASS, вы можете изменить значение $screen-sm, чтобы настроить свой минимальный размер

пример: $screen-sm: 600px;

вы должны поместить это значение в свое приложение.scss файл перед @import "bootstrap";

$screen-sm:600px;
@import "bootstrap";

меньше переменных начинаются с " @ "просто изменили их на"$", чтобы переопределить их перед импортом.

вот список переменных.

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

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

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

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

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

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

просто запишите этот код в свой собственный стиль.файл 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;
        }
    }