Есть ли способ увеличить точку, в которой рушится загрузочная панель навигации 3 (то есть, чтобы она свалилась в раскрывающийся список на портретных планшетах)?
Эти два были применимы к начальной загрузке 2, но не сейчас!
Как изменить порог коллапса навигационной панели, используя Twitter при начальной загрузке?
Ответы:
У меня была такая же проблема сегодня.
Bootstrap 4
Это встроенная функциональность: https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors
Вы должны использовать
.navbar-expand{-sm|-md|-lg|-xl}
классы:Bootstrap 3
Просто измените
991px
на1199px
дляmd
размеров.демонстрация
источник
.navbar-collapse.collapse.in { display: block!important; }
чтобы предотвратить его исчезновение. Хорошая работа, тем не менее, сэкономил мне часы.dropdown-menu
элементы в навигационной панели.Большая разница между Bootstrap 2 и Bootstrap 3 заключается в том, что Bootstrap 3 «сначала мобильный».
Это означает, что стили по умолчанию предназначены для мобильных устройств, а в случае с Navbars, это означает, что они «свернуты» по умолчанию и «расширяются», когда достигают определенного минимального размера.
На сайте Bootstrap 3 действительно есть «подсказка» о том, что делать: http://getbootstrap.com/components/#navbar
Если вы собираетесь перекомпилировать 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
,/fonts
. Настройка просто дает скомпилированные файлы, которые вы выбрали.Самый простой способ - настроить загрузчик
найти переменную:
который установлен на @ screen-sm, вы можете изменить его в соответствии с вашими потребностями. Надеюсь, поможет!
источник
они контролируются переменными, нет необходимости копаться в источнике. при начальной загрузке сначала попробуйте переменные, а затем переопределяете. затем вернитесь и попробуйте переменные снова;)
я использовал bootstrap-sass с рельсами, но то же самое с LESS по умолчанию.
Это оно! эта справочная страница переменных очень удобна: https://github.com/twbs/bootstrap/blob/master/less/variables.less
источник
Благодаря Seb33300 я получил это работает. Тем не менее, важная часть, кажется, отсутствует. По крайней мере, в Bootstrap версии 3.1.1.
Моя проблема заключалась в том, что навигационная панель рухнула соответственно на правильную ширину, но кнопка меню не работала. Я не мог развернуть и свернуть меню.
Это связано с тем, что класс collapse.in переопределяется параметром! Важный в .navbar-collapse.collapse и может быть решен добавлением «collapse.in». Пример Seb33300 завершен ниже:
источник
Я хотел поднять голос и прокомментировать ответ jmbertucci, но мне пока не доверяют элементы управления. У меня была такая же проблема, и я решил ее, как он сказал. Если вы используете Bootstrap 3.0, отредактируйте переменные LESS в variables.less. Точки останова реагирования устанавливаются вокруг строки 200:
Затем установите значение свертывания для панели навигации с помощью переменной @ grid-float-breakpoint примерно в строке 232. По умолчанию установлено значение @ screen-tablet . Если вы хотите, вы можете использовать значение в пикселях, но я предпочитаю использовать переменные LESS.
источник
-min
: @ screen-md-min: 800px; @ screen-lg-min: 1200 пикселей; @ grid-float-breakpoint: @ screen-md-min;Если проблема, с которой вы сталкиваетесь, состоит в том, что меню разбивается на несколько строк , вы можете попробовать одно из следующих действий:
1) Старайтесь уменьшить количество пунктов меню или их длину, например, удаляя пункты меню или сокращая слова.
2) Уменьшение отступов между пунктами меню, например так:
По умолчанию отступ составляет 15 пикселей с обеих сторон (слева и справа).
Если вы предпочитаете менять каждую отдельную сторону, используйте:
Этот параметр также влияет на раскрывающийся список.
Это не отвечает на вопрос, но может помочь другим, кто не хочет связываться с 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 точек останова:
источник
Я сделал CSS с моей установкой Bootstrap 3.0.0, так как я не очень знаком с LESS. Вот код, который я добавил в свой пользовательский файл CSS (который я загружаю после bootstrap.css), который позволил мне контролировать, чтобы меню всегда работало как
accordion
.Примечание. Я поместил весь
navbar
классsidebar
в div с классом, чтобы отделить поведение, которое я хотел, чтобы оно не влияло на другие панели навигации на моем сайте, такие как главное меню. Приспосабливайтесь к своим потребностям, надеюсь, это поможет.Дополнительное примечание: я также добавил изменение к переключателю главного меню
navbar
(так как код выше на моем сайте используется для «подменю» на стороне.Я изменился:
в:
А потом еще и поправил:
в:
Если у вас будет только один,
navbar
думаю, вам не нужно об этом беспокоиться, но это помогло мне в моем случае.источник
А для тех, кто хочет свернуться на ширине меньше, чем стандартные 768px (разверните на ширине менее 768px), это css:
источник
Я думаю, что нашел простое решение для изменения точки останова, только через css.
Я надеюсь, что другие могут подтвердить это, так как я не проверил это полностью, и я не уверен, есть ли побочные эффекты для этого решения.
Вы должны изменить значения медиазапроса для следующих определений классов:
Это то, что сработало для меня в моем текущем проекте, но мне все еще нужно изменить некоторые определения CSS, чтобы правильно расположить меню для всех размеров экрана.
Надеюсь это поможет.
источник