Bootstrap 3 Navbar Свернуть

Есть ли способ увеличить точку, в которой рушится загрузочная панель навигации 3 (то есть, чтобы она свалилась в раскрывающийся список на портретных планшетах)?

Эти два были применимы к начальной загрузке 2, но не сейчас!

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

Изменить стандартную отзывчивую точку останова navbar

У меня была такая же проблема сегодня.

Bootstrap 4

Это встроенная функциональность: https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

Вы должны использовать .navbar-expand{-sm|-md|-lg|-xl}классы:

<nav class="navbar navbar-expand-md navbar-light bg-light">

Bootstrap 3

@media (max-width: 991px) {
    .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-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

Просто измените 991pxна 1199pxдля mdразмеров.

демонстрация

Большая разница между Bootstrap 2 и Bootstrap 3 заключается в том, что Bootstrap 3 «сначала мобильный».

Это означает, что стили по умолчанию предназначены для мобильных устройств, а в случае с Navbars, это означает, что они «свернуты» по умолчанию и «расширяются», когда достигают определенного минимального размера.

На сайте Bootstrap 3 действительно есть «подсказка» о том, что делать: http://getbootstrap.com/components/#navbar

Настройте точку разрушения

В зависимости от содержимого панели навигации вам может потребоваться изменить точку, в которой панель навигации переключается между свернутым и горизонтальным режимами. Настройте переменную @ grid-float-breakpoint или добавьте свой собственный медиа-запрос.

Если вы собираетесь перекомпилировать LESS, вы найдете отмеченную переменную LESS в variables.lessфайле. В настоящее время он настроен на «расширение», то @media (min-width: 768px)есть «маленький экран» (то есть планшет) по терминологии Bootstrap 3.

@grid-float-breakpoint: @screen-tablet;

Если вы хотите, чтобы свертывание было немного дольше, вы можете настроить его следующим образом:

@grid-float-breakpoint: @screen-desktop; (992px точка останова)

или расширить раньше

@grid-float-breakpoint: @screen-phone (Точка останова 480px)

Если вы хотите, чтобы он расширялся позже и не занимался перекомпиляцией LESS, вам придется перезаписать стили, которые применяются на 768px медиазапросу, и вернуть их к предыдущему значению. Затем повторно добавьте их в соответствующее время.

Я не уверен, есть ли лучший способ сделать это. Перекомпиляция Bootstrap LESS для ваших нужд - лучший (самый простой) способ. В противном случае вам нужно будет найти все медиазапросы CSS, которые влияют на ваш Navbar, перезаписать их на стили по умолчанию при ширине 768 пикселей и затем вернуть их обратно на более высокую минимальную ширину.

Перекомпиляция LESS сделает всю эту магию за вас, просто изменив переменную. Который - в значительной степени пункт прекомпиляторов LESS / SASS. знак равно

(обратите внимание, я их все проверил, это примерно 100 строк кода, что достаточно раздражает, чтобы я отбросил идею и просто пересобрал Bootstrap для данного проекта и не допустил случайного испорчения)

Надеюсь, это поможет!

Ура!

Самый простой способ - настроить загрузчик

найти переменную:

 @grid-float-breakpoint

который установлен на @ screen-sm, вы можете изменить его в соответствии с вашими потребностями. Надеюсь, поможет!

они контролируются переменными, нет необходимости копаться в источнике. при начальной загрузке сначала попробуйте переменные, а затем переопределяете. затем вернитесь и попробуйте переменные снова;)

я использовал bootstrap-sass с рельсами, но то же самое с LESS по умолчанию.

FILE: main.css.scss
-------------------

// control the screen sizes
$screen-xs-min: 300px;
$screen-sm-min: 400px;
$screen-md-min: 800px;
$screen-lg-min: 1200px;

// this tells which screen size to use to start breaking on
// will tell navbar when to collapse
$grid-float-breakpoint: $screen-md-min;

// then import your bootstrap
@import "bootstrap";

Это оно! эта справочная страница переменных очень удобна: https://github.com/twbs/bootstrap/blob/master/less/variables.less

Благодаря Seb33300 я получил это работает. Тем не менее, важная часть, кажется, отсутствует. По крайней мере, в Bootstrap версии 3.1.1.

Моя проблема заключалась в том, что навигационная панель рухнула соответственно на правильную ширину, но кнопка меню не работала. Я не мог развернуть и свернуть меню.

Это связано с тем, что класс collapse.in переопределяется параметром! Важный в .navbar-collapse.collapse и может быть решен добавлением «collapse.in». Пример Seb33300 завершен ниже:

@media (max-width: 991px) {
    .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;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

Я хотел поднять голос и прокомментировать ответ jmbertucci, но мне пока не доверяют элементы управления. У меня была такая же проблема, и я решил ее, как он сказал. Если вы используете Bootstrap 3.0, отредактируйте переменные LESS в variables.less. Точки останова реагирования устанавливаются вокруг строки 200:

@screen-xs:                  480px;
@screen-phone:               @screen-xs;

// Small screen / tablet
@screen-sm:                  768px;
@screen-tablet:              @screen-sm;

// Medium screen / desktop
@screen-md:                  992px;
@screen-desktop:             @screen-md;

// Large screen / wide desktop
@screen-lg:                  1200px;
@screen-lg-desktop:          @screen-lg;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm - 1);
@screen-sm-max:              (@screen-md - 1);
@screen-md-max:              (@screen-lg - 1);

Затем установите значение свертывания для панели навигации с помощью переменной @ grid-float-breakpoint примерно в строке 232. По умолчанию установлено значение @ screen-tablet . Если вы хотите, вы можете использовать значение в пикселях, но я предпочитаю использовать переменные LESS.

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

1) Старайтесь уменьшить количество пунктов меню или их длину, например, удаляя пункты меню или сокращая слова.

2) Уменьшение отступов между пунктами меню, например так:

.navbar .nav > li > a {
padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */
}

По умолчанию отступ составляет 15 пикселей с обеих сторон (слева и справа).

Если вы предпочитаете менять каждую отдельную сторону, используйте:

padding-left: 7px; 
padding-right: 8px;

Этот параметр также влияет на раскрывающийся список.

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

Набвар рухнет на небольшие устройства. Точка свертывания определяется @ grid-float-breakpoint в переменных. По умолчанию это будет до 768 пикселей. Для экранов с шириной экрана менее 768 пикселей панель навигации будет выглядеть следующим образом:

Можно изменить @ grid-float-breakpoint в variables.less и перекомпилировать Bootstrap. При этом вам также придется изменить @ screen-xs-max в navbar.less. Вам нужно будет установить это значение на вашу новую @ grid-float-breakpoint -1. Смотрите также: https://github.com/twbs/bootstrap/pull/10465 . Это необходимо, чтобы изменить формы и выпадающие списки в панели навигации @ grid-float-breakpoint на их мобильную версию.

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

Я не совсем понимаю, как может работать подход Seb33300. Это, конечно, не работает с Bootstrap 4.0.3. Чтобы панель навигации расширялась на 1200 вместо 768, правила для обоих медиа-запросов должны быть переопределены, чтобы предотвратить расширение на 768 и принудительное расширение на 1200.

У меня более длинное меню, которое можно было бы перенести на iPad в портретном режиме. Следующее удерживает меню свернутым до 1200 точек останова:

@media (min-width: 768px) {
    .navbar-header {
        float: none; }
    .navbar-toggle {
        display: block; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px; }
    .navbar-collapse.collapse {
        display: none !important; }
        .navbar-collapse.collapse.in { 
        display: block!important; 
        margin-top: 0px; }
}
@media (min-width: 1200px) {
    .navbar-header {
        float: left; }
    .navbar-toggle {
    display: none; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        display: block !important; }
}

Я сделал CSS с моей установкой Bootstrap 3.0.0, так как я не очень знаком с LESS. Вот код, который я добавил в свой пользовательский файл CSS (который я загружаю после bootstrap.css), который позволил мне контролировать, чтобы меню всегда работало как accordion.
Примечание. Я поместил весь navbarкласс sidebarв div с классом, чтобы отделить поведение, которое я хотел, чтобы оно не влияло на другие панели навигации на моем сайте, такие как главное меню. Приспосабливайтесь к своим потребностям, надеюсь, это поможет.

/* Sidebar Menu Fix */

.sidebar .navbar-nav {
  margin: 7.5px -15px;
}
.sidebar .navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
.sidebar .navbar-collapse {
  max-height: 500px;
}
.sidebar .navbar-nav .open .dropdown-menu {
  position: static;
  float: none;
  width: auto;
  margin-top: 0;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}
.sidebar .dropdown-menu > li > a {
  color: #777777;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #333333;
  background-color: transparent;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #555555;
  background-color: #e7e7e7;
}
.sidebar .navbar-nav {
  float: none;
}
.sidebar .navbar-nav > li {
  float: none;
}

Дополнительное примечание: я также добавил изменение к переключателю главного меню navbar(так как код выше на моем сайте используется для «подменю» на стороне.

Я изменился:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

в:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-topmenu">

А потом еще и поправил:

<div class="navbar-collapse collapse navbar-collapse">

в:

<div class="navbar-collapse collapse navbar-collapse-topmenu">

Если у вас будет только один, navbarдумаю, вам не нужно об этом беспокоиться, но это помогло мне в моем случае.

А для тех, кто хочет свернуться на ширине меньше, чем стандартные 768px (разверните на ширине менее 768px), это css:

@media (min-width: 600px) {
.navbar-header {
        float: left;
}
.navbar-toggle {
    display: none;
}
.navbar-collapse {
    border-top: 0 none;
    box-shadow: none;
    width: auto;
}
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left !important;
    margin: 0;
}
.navbar-nav>li {
    float: left;
}
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}
}

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

Я надеюсь, что другие могут подтвердить это, так как я не проверил это полностью, и я не уверен, есть ли побочные эффекты для этого решения.

Вы должны изменить значения медиазапроса для следующих определений классов:

@media (min-width: BREAKPOINT px ){
    .navbar-toggle{display:none}
}

@media (min-width: BREAKPOINT px){
    .navbar-collapse{
        width:auto;
        border-top:0;box-shadow:none
    }
    .navbar-collapse.collapse{
        display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important
    }
    .navbar-collapse.in{
        overflow-y:visible
   }
   .navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{
        padding-left:0;padding-right:0
    }
}

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

Надеюсь это поможет.