Bootstrap 3 Navbar Свернуть


202

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

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

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

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


Почему они не применимы?
PW Kad

мне показалось, что сам код был немного
изменен

Я не совсем понимаю. Вы имеете в виду код CSS? Классы должны быть в целом такими же, с небольшими изменениями
PW Kad

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

stackoverflow.com/a/23536146/563309 - работал для меня, поможет кому-то ...
JenonD

Ответы:


335

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

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размеров.

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


21
Пришлось добавить, .navbar-collapse.collapse.in { display: block!important; }чтобы предотвратить его исчезновение. Хорошая работа, тем не менее, сэкономил мне часы.
Дейв Форбер

2
Отличная альтернатива, но пришлось добавить .navbar-collapse.collapse.in {display: block! Важный; margin-top: 0px; }
Mavis

4
Что мне нравится в этом, так это то, что если я обновляю Bootstrap, мне не нужно беспокоиться о поиске переменной и ее перекомпиляции.
ScubaSteve

6
но выпадающие списки все еще были в режиме рабочего стола, мне пришлось редактировать код в строке 3934 до макс-с: 992 (в bootstrap.css), я использую загрузчик 3.2. На всякий случай кому-то это нужно.
Чандан

4
Это не похоже на dropdown-menuэлементы в навигационной панели.
alexw

142

Большая разница между 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 для данного проекта и не допустил случайного испорчения)

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

Ура!


В чем разница между загрузочной версией по умолчанию и настроенной версией? Структура папок у них совершенно иная, а в индивидуальной версии есть только файлы CSS и JS, так как в версии по умолчанию много папок, включая LESS. Я немного смущен.
Рахул Патва

1
@RahulPatwa Если вы загрузите полную версию Bootstrap 3 Zip, вы получите все файлы для разработки вместе с ней. Это файлы, которые люди используют для продолжения разработки Bootstrap и включают такие вещи, как рабочие файлы Composer и Grunt, системные файлы git, файлы LESS и т. Д. Полные файлы находятся в папке / dist. Вы увидите папки для /css, /js, /fonts. Настройка просто дает скомпилированные файлы, которые вы выбрали.
jmbertucci

так что, если я скачаю полную версию начальной загрузки, а затем внесу некоторые изменения в меньшее количество переменных ... Как мне скомпилировать это обратно в файл CSS?
Рахул Патва

2
@RahulPatwa Есть несколько способов компиляции LESS. Веб- сайт LESS объясняет, как на стороне клиента, так и на стороне сервера. Crunch - это простой графический интерфейс, который вы можете использовать. Сайт Bootstrap особенно рекомендует использовать их инструмент RECESS . И это еще не все .
jmbertucci

9
Самый простой способ - просто перейти на getbootstrap.com/customize, чтобы переопределить значение \ @ grid-float-breakpoint для чего-то жесткого кода (например, 520px) или для экрана меньшего размера, например \ @ screen-xs-min
neves

34

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

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

 @grid-float-breakpoint

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


2
Установка этого значения в очень маленькое значение, например, 1px отключит сворачивание навигационной панели (например, если вы хотите не реагирующую навигационную панель).
Грегор Славец

Я также установил это значение на «@ screen-xs-min», чтобы ограничить свернутое меню 480px. Для некоторых сайтов это работает хорошо и создает приятный эффект, когда вы можете легко изменить полное меню на свернутое меню на iPhone, изменив ориентацию.
Chiappa

20

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

я использовал 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


1
Так чисто. Отличное решение. Спасибо.
Джедидия Херт

10

Благодаря 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;
    }
}

Префект стандартное решение CSS для начальной загрузки 3.3.6, спасибо!
xxxbence

7

Я хотел поднять голос и прокомментировать ответ 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.


обратите внимание, что размеры теперь устарели, и все, что осталось, это -min: @ screen-md-min: 800px; @ screen-lg-min: 1200 пикселей; @ grid-float-breakpoint: @ screen-md-min;
Даг Ли

6

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

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. Два общих подхода к решению этой проблемы.


3

Набвар рухнет на небольшие устройства. Точка свертывания определяется @ 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 на их мобильную версию.


Как вы используете стилус? Используете ли вы github.com/Acquisio/bootstrap-stylus . В последнем случае вы должны сделать то же, что и выше. Загрузите загрузочные стили, измените настройку в stylus / variables.styl и т. Д. И перекомпилируйте.
Бас Джобсен

3

Я обеспокоен проблемами с техническим обслуживанием и модернизацией в будущем от настройки 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; }
}

1

Я сделал 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думаю, вам не нужно об этом беспокоиться, но это помогло мне в моем случае.


0

А для тех, кто хочет свернуться на ширине меньше, чем стандартные 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;
}
}

0

Я думаю, что нашел простое решение для изменения точки останова, только через 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, чтобы правильно расположить меню для всех размеров экрана.

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.