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


205

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

Моя проблема такая же, как в этом вопросе: Bootstrap 3 Navbar Collapse

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

Спасибо!

Ответы:


50

Вы должны написать специальный медиа-запрос для этого, из вашего вопроса ниже 768px, навигационная панель рухнет, поэтому примените его выше 768px и ниже 1000px, вот так:

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

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


В настоящее время навигационная панель рушится, когда ширина ниже 768 пикселей. Но я хочу, чтобы навигационная панель рухнула, когда ширина ниже 1000 пикселей. Для этого вам не нужно показывать .collapse между 768 и 1000?
Ближайшая точка

да, collapseкласс важен для экрана мобильного устройства, поэтому, если ширина меньше 768 пикселей, будет навигационная панель display:none, поэтому требуемое действие будет применено внутри отметки 768 и 1000 ...
SaurabhLP

64
это не работает в Bootstrap 3, потому что есть другое правило, navbar-collapse.collapseкоторое имеет display: block !important. Отключение этого приведет к тому, что кнопка свертывания не появится ... так что я думаю, что нужно переопределить множество классов, а не толькоcollapse
Даниэле Риччи

42
Да, группа пользовательских классов Bootstrap должна быть переопределена в пользовательском медиа-запросе: bootply.com/120604
Zim

1
Хаха, кто, черт возьми, построил бутстрап? Не думали, что нам нужно будет изменить эту маленькую деталь?
МЗ

400

ОБНОВЛЕНИЕ 2018

Bootstrap 4

Изменить точку останова navbar проще в Bootstrap 4 с помощью navbar-expand-*классов:

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

  • navbar-expand-sm = мобильное меню на экранах xs <576px
  • navbar-expand-md = мобильное меню на см экранах <768px
  • navbar-expand-lg = мобильное меню на экранах md <992px
  • navbar-expand-xl = мобильное меню на экранах lg <1200 пикселей
  • navbar-expand = никогда не использовать мобильное меню
  • (no expand class) = всегда используйте мобильное меню

Если исключить, navbar-expand-*мобильное меню будет использоваться по allширине. Вот демонстрация всех 6 состояний navbar: Bootstrap 4 Пример Navbar

Вы также можете использовать пользовательскую точку останова (??? px), добавив немного CSS. Например, вот 1300px ..

@media (min-width: 1300px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4 Пользовательская точка останова Navbar
Bootstrap 4 Примеры точек останова Navbar


Bootstrap 3

Для Bootstrap 3.3.x, вот рабочий CSS для переопределения точки останова navbar. Перейдите 991pxк измерению в пикселях точки, в которой вы хотите, чтобы свалилась панель навигации ...

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

Рабочий пример для 991px: http://www.bootply.com/j7XJuaE5v6
Рабочий пример для 1200px: https://www.codeply.com/go/VsYaOLzfb4 (с формой поиска)

Примечание. Вышеуказанное работает для всего, что превышает 768 пикселей . Если вам нужно изменить его меньше , чем 768px на примере меньше , чем 768px здесь .



Попробуйте это при первом посещении: [link] ( getbootstrap.com/customize Locate: «Меньше переменных» -> «Точки останова медиазапросов» Изменение: @ screen-lg значение от 1200px до 1920px Locate: «Grid system» -> @ grid-float Изменение точки останова: с @ screen-sm-min на @ screen-lg Прокрутите до конца страницы. Нажмите «Скомпилировать и загрузить» Извлеките и используйте эти загруженные файлы.
rpalzona

6
Приведенный выше код работает, когда я устанавливаю значение выше 768px, однако мне нужно добиться обратного ... Я хочу, чтобы он только свернулся, например, на 400px, но когда я устанавливаю это значение, bootstrap, похоже, берет исходные 768 - Любые идеи? Спасибо
Крис Ричардс

6
Хотя этот ответ работает как очарование, но он не работает с выпадающим меню , возможно, вам нужно улучшить ответ.
Абхишек Пандей

2
@AbhishekPandey Я нашел полезным этот ответ (часть, касающаяся выпадающего
меню

1
Спасибо. В отличие от «решения» с галочкой рядом с ним, ваш код на самом деле работает.
Майкл С. Миллер

46

в bootstrap3 измените эту переменную @ grid-float-breakpoint на ту, которая вам нужна. Значение по умолчанию - 768 пикселей


17
Можете ли вы опубликовать пример, пожалуйста?
e.thompsy

2
Имейте в виду, что если вы используете sass и не хотите заменять код поставщика (вы не должны), вы должны включить файл, содержащий переменную, с вашим пользовательским значением до загрузки файлов sass. Причина в том, что все переменные Bootstrap установлены по умолчанию! значения, поэтому нам нужно переопределить эти значения, сначала импортируя наши переменные.
Макис К.

Пожалуйста, добавьте пример того, как это сделать ... Я новичок в начальной загрузке, и grep показывает 0 экземпляров этой переменной в моем проекте.
Мэтт Кларк

1
@MattClark @grid-float-breakpointопределяется на компиляторе: getbootstrap.com/customize - значение по умолчанию, @screen-sm-minно вы можете изменить его на 1234px.
rybo111

24

Наконец-то выяснили, как изменить ширину свертывания, перебирая '@ grid-float-breakpoint' на http://getbootstrap.com/customize/ .

Перейдите на строку 2923 в bootstrap.css (также минимальная версия) и измените @media screen and (min-width: 768px) { на@media screen and (min-width: 1000px) {

Таким образом, код в конечном итоге будет:

@media screen and (min-width: 1000px) {
  .navbar-brand {
    float: left;
    margin-right: 5px;
    margin-left: -15px;
  }
  .navbar-nav {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    border-radius: 0;
  }
  .navbar-nav.pull-right {
    float: right;
    width: auto;
  }
  .navbar-toggle {
    position: relative;
    top: auto;
    left: auto;
    display: none;
  }
  .nav-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}

Обратите внимание, что номер строки, которую вы указали, будет другим, если вы использовали настройщик
henrywright

1
Просто изменил @grid-float-breakpointв моих responsive.lessработах для меня!
cvng

6
Вы должны переопределить это в другом файле CSS вместо непосредственного изменения файлов начальной загрузки css.
Иванка Тодорова

1
Первое посещение: [ссылка] ( getbootstrap.com/customize Locate: «Меньше переменных» -> « Точки останова для медиа-запросов» Изменение: значение @ screen-lg от 1200px до 1920px Locate: «Сетка» -> @ grid-float-breakpoint Измените: @ screen-sm-min на @ screen-lg Прокрутите до конца страницы. Нажмите «Скомпилировать и загрузить» Извлеките и используйте эти загруженные файлы.
rpalzona

13

Я просто сделал это успешно, используя следующий код CSS.

@media(max-width:1000px)  {

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-collapse {
        overflow-x: visible !important;
    }

    .navbar-collapse.in {
      overflow-y: auto !important;
    }

    .collapse.in {
      display: block !important;
    }

}

2
Она не показывает свернутую кнопку меню, когда ширина составляет от 768 до 1000 пикселей.
мастер

4
@craftsman: Для кнопки используйте это: .navbar-toggle {display: block! важный; } .navbar-header {width: 100%; высота: 60 ​​пикселей; }
Аникет Суряванши

3
до сих пор не показывает содержимое внутри меню гамбургера
беззад

13

В Bootstrap 3 .less исходного кода , есть переменная , определенная в variables.lessназывается , @grid-float-breakpointкоторая имеет следующий полезный комментарий:

//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;

Соответствующее @grid-float-breakpoint-maxзначение установлено равным минус 1 пиксель:

//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);

Решение:

Так что просто установите @grid-float-breakpointвместо этого значение 1000px и перестройте bootstrap.lessвbootstrap.css :

например

@grid-float-breakpoint: 1000px;

Как восстановить? Я попробовал эту командную строку: $ lessc bootstrap.less bootstrap.cssно ничего не произошло
AnthonyR

@AnthonyRn: Понятия не имею, как настроен ваш проект. Я просто обновил источник Bootstrap LESS в своем проекте VS 2013, и он был восстановлен при сохранении. возможно, вам следует задать новый вопрос?
Ушел кодирование

Моя проблема была решена с помощью онлайн-инструмента настройки Bootstrap здесь getbootstrap.com/customize Спасибо за решение!
AnthonyR

1
Я думаю, что это должен быть принятый ответ, поскольку он использует собственные методы Bootstraps для определения точки останова. В качестве примера, я смог просто «перестроить» загрузчик и получить желаемый результат, установив для этой переменной то, что мне нужно было в качестве точки останова.
Серж Мелис

@AnthonyR Чтобы перестроить, вы используете команду grunt, grunt distкоторая восстановит каталог dist. Вы запустите эту команду из каталога, в котором находится ваш gruntfile.js. Ссылка: getbootstrap.com/getting-started/#grunt
Radmation


7

В дополнение к ответу @Skely, чтобы выпадающие меню внутри панели навигации работали, также добавьте их классы для переопределения. Окончательный код ниже:

    @media (min-width: 768px) and (max-width: 991px) {
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .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;*/
            margin: 7.5px 50px 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;
        }
    }

демонстрационный код


4

В bootstrap v4 навигация может быть свернута рано или поздно с использованием различных классов CSS

например:

  • Navbar-переключаемые-см
  • Navbar-переключаемый-мкр
  • Navbar-переключаемый-Л.Г.

С помощью кнопки для навигации:

  • скрытых см вверх
  • скрытый мкр-вверх
  • скрытых Л.Г. вверх

В текущем альфа, кажется, только пойти navbar-toggleable-smна меня, xsделает его никогда не переключаться. Может быть, я делаю что-то не так. Спасибо!
nerdwaller

@nerdwaller выглядит так, как будто ты прав, сделал правку от хз до см.
Whitneyland

3

Для Bootstrap 3.3 это единственный код, который вам нужен:

@media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}

Не работает полностью Отображаемые пункты меню не вертикальные, а горизонтальные.
Воломике

3

Это сработало для меня Bootstrap3

@media (min-width: 768px) {
    .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;
      }
}

Потребовалось время, чтобы понять эти два:

.navbar-collapse.collapse {
   display: none!important;
}
.navbar-collapse.collapse.in {
   display: block!important;
}

Это сработало для меня. Единственное исключение - минимальная ширина пикселя должна быть 1000 пикселей в приведенном выше примере.
Саша

2

Лучше всего будет использовать порт используемого вами процессора CSS.

Я большой поклонник SASS, поэтому сейчас я использую https://github.com/thomas-mcdonald/bootstrap-sass

Похоже, здесь есть форк для Stylus: https://github.com/Acquisio/bootstrap-stylus

В противном случае, Search & Replace ваш лучший друг прямо в версии CSS ...


Таким образом, для параметра поиска и замены это означает непосредственное редактирование медиа-запросов bootstrap.css? Могу ли я изменить медиазапрос, который относится только к навигационной панели? Мне сказали, что не стоит редактировать исходные файлы начальной загрузки, но я не знаю почему, что вы думаете?
Ближайшая точка

2

Навбары могут использовать классы .navbar-toggler, .navbar-collapse и .navbar-expand {-sm | -md | -lg | -xl} для изменения, когда их содержимое сворачивается за кнопкой. В сочетании с другими утилитами вы можете легко выбирать, когда показывать или скрывать определенные элементы.

Для панелей навигации, которые никогда не разрушаются, добавьте класс .navbar-expand на панель навигации. Для навигационных панелей, которые всегда рушатся, не добавляйте класс .navbar-expand.

Например :

<nav class="navbar navbar-expand-lg"></nav>

Мобильное меню отображается на большом экране.

Ссылка: https://getbootstrap.com/docs/4.0/components/navbar/


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

1

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

    @media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important; 
    }
    .navbar-nav>li {
        float: none;
    } 
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
}

0

Вот что помогло мне:

@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display:block !important;
}

С вашим решением и предложением Veek я обнаружил, что в промежутке между 768 и 1000 поля неоправданно увеличиваются. Они в порядке за пределами этих пределов. В вашем решении значок свернутого меню также не остается справа после свертывания, а прижимается к «бренду».
Майк О'Коннор

Извините, я, очевидно, дурак. У меня все еще есть проблема неоправданно широких полей, появляющихся в этих пределах. Однако теперь я вижу, что официальный пример начальной загрузки в Интернете демонстрирует ту же проблему с полями.
Майк О'Коннор

0

В начальной загрузке 4, если вы хотите переопределить, когда navbar-expand- *, разворачивается и сворачивается, показывает и скрывает гамбургер (navbar-toggler), вы должны найти этот стиль / определение в bootstrap.css и переопределить его в своем собственный customstyle.css (или непосредственно в bootstrap.css, если вы так склонны).

Например. Я хотел, чтобы navbar-expand-lg свернулся и показал navbar-toggler на 950px. В bootstrap.css я нахожу:

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

И ниже этого ...

@media (min-width:992px) { 
    ... lots of styling ...
}

Я скопировал оба запроса @media и вставил их в свой style.css, затем изменил размер в соответствии со своими потребностями. В моем случае я хотел, чтобы он рухнул на 950 пикселей. Запросы @media должны быть разных размеров (я предполагаю), поэтому я установил максимальную ширину контейнера в 949.98px и использовал 950px для другого запроса @media, поэтому следующий код был добавлен в мой style.css. Это было нелегко отделить от искаженных решений, которые я нашел в Stackoverflow и в других местах. Надеюсь это поможет.

@media (max-width: 949.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 950px) {
    .navbar-expand-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .dropup .dropdown-menu {
        top: auto;
        bottom: 100%;
    }
}

0

Вот мой рабочий код, использующий в React с Bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<style>
  @media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
  </style>

0

Это теперь поддерживается в Bootstrap 4.4

navbar-expand-sm 

Да, правильно, но вам понадобится navbar-expand-lg, чтобы свернуть навигацию на больших экранах
Кодери
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.