В настоящее время, когда ширина браузера падает ниже 768 пикселей, панель навигации переходит в свернутый режим. Я хочу изменить эту ширину на 1000 пикселей, поэтому, когда размер браузера ниже 1000 пикселей, панель навигации переходит в свернутый режим. Я хочу сделать это без использования LESS, я использую стилус, а не LESS.
Моя проблема такая же, как в этом вопросе: Bootstrap 3 Navbar Collapse
Но все ответы на эти вопросы объясняют, как это сделать, изменив переменную LESS. Я не имел дело с LESS, я использую стилус, поэтому я хочу знать, как это можно сделать с помощью стилуса или другого метода.
Спасибо!
источник
collapse
класс важен для экрана мобильного устройства, поэтому, если ширина меньше 768 пикселей, будет навигационная панельdisplay:none
, поэтому требуемое действие будет применено внутри отметки 768 и 1000 ...navbar-collapse.collapse
которое имеетdisplay: block !important
. Отключение этого приведет к тому, что кнопка свертывания не появится ... так что я думаю, что нужно переопределить множество классов, а не толькоcollapse
ОБНОВЛЕНИЕ 2018
Bootstrap 4
Изменить точку останова navbar проще в Bootstrap 4 с помощью
navbar-expand-*
классов:<nav class="navbar fixed-top navbar-expand-sm">..</nav>
navbar-expand-sm
= мобильное меню на экранах xs <576pxnavbar-expand-md
= мобильное меню на см экранах <768pxnavbar-expand-lg
= мобильное меню на экранах md <992pxnavbar-expand-xl
= мобильное меню на экранах lg <1200 пикселейnavbar-expand
= никогда не использовать мобильное меню(no expand class)
= всегда используйте мобильное менюЕсли исключить,
navbar-expand-*
мобильное меню будет использоваться поall
ширине. Вот демонстрация всех 6 состояний navbar: Bootstrap 4 Пример NavbarВы также можете использовать пользовательскую точку останова (??? px), добавив немного CSS. Например, вот 1300px ..
Bootstrap 4 Пользовательская точка останова Navbar
Bootstrap 4 Примеры точек останова Navbar
Bootstrap 3
Для Bootstrap 3.3.x, вот рабочий CSS для переопределения точки останова navbar. Перейдите
991px
к измерению в пикселях точки, в которой вы хотите, чтобы свалилась панель навигации ...Рабочий пример для 991px: http://www.bootply.com/j7XJuaE5v6
Рабочий пример для 1200px: https://www.codeply.com/go/VsYaOLzfb4 (с формой поиска)
Примечание. Вышеуказанное работает для всего, что превышает 768 пикселей . Если вам нужно изменить его меньше , чем 768px на примере меньше , чем 768px здесь .
источник
в bootstrap3 измените эту переменную @ grid-float-breakpoint на ту, которая вам нужна. Значение по умолчанию - 768 пикселей
источник
@grid-float-breakpoint
определяется на компиляторе: getbootstrap.com/customize - значение по умолчанию,@screen-sm-min
но вы можете изменить его на1234px
.Наконец-то выяснили, как изменить ширину свертывания, перебирая '@ grid-float-breakpoint' на http://getbootstrap.com/customize/ .
Перейдите на строку 2923 в bootstrap.css (также минимальная версия) и измените
@media screen and (min-width: 768px) {
на@media screen and (min-width: 1000px) {
Таким образом, код в конечном итоге будет:
источник
@grid-float-breakpoint
в моихresponsive.less
работах для меня!Я просто сделал это успешно, используя следующий код CSS.
источник
В Bootstrap 3 .less исходного кода , есть переменная , определенная в
variables.less
называется ,@grid-float-breakpoint
которая имеет следующий полезный комментарий:Соответствующее
@grid-float-breakpoint-max
значение установлено равным минус 1 пиксель:Решение:
Так что просто установите
@grid-float-breakpoint
вместо этого значение 1000px и перестройтеbootstrap.less
вbootstrap.css
:например
источник
$ lessc bootstrap.less bootstrap.css
но ничего не произошлоgrunt dist
которая восстановит каталог dist. Вы запустите эту команду из каталога, в котором находится ваш gruntfile.js. Ссылка: getbootstrap.com/getting-started/#gruntСпособ изменения переменных начальной загрузки Sass фактически задокументирован на странице github bootstrap-sass .
Просто переопределите переменные перед тем, как начинать загрузку @import:
источник
В дополнение к ответу @Skely, чтобы выпадающие меню внутри панели навигации работали, также добавьте их классы для переопределения. Окончательный код ниже:
демонстрационный код
источник
В bootstrap v4 навигация может быть свернута рано или поздно с использованием различных классов CSS
например:
С помощью кнопки для навигации:
источник
navbar-toggleable-sm
на меня,xs
делает его никогда не переключаться. Может быть, я делаю что-то не так. Спасибо!Для Bootstrap 3.3 это единственный код, который вам нужен:
источник
Это сработало для меня Bootstrap3
Потребовалось время, чтобы понять эти два:
источник
Лучше всего будет использовать порт используемого вами процессора CSS.
Я большой поклонник SASS, поэтому сейчас я использую https://github.com/thomas-mcdonald/bootstrap-sass
Похоже, здесь есть форк для Stylus: https://github.com/Acquisio/bootstrap-stylus
В противном случае, Search & Replace ваш лучший друг прямо в версии CSS ...
источник
Навбары могут использовать классы .navbar-toggler, .navbar-collapse и .navbar-expand {-sm | -md | -lg | -xl} для изменения, когда их содержимое сворачивается за кнопкой. В сочетании с другими утилитами вы можете легко выбирать, когда показывать или скрывать определенные элементы.
Для панелей навигации, которые никогда не разрушаются, добавьте класс .navbar-expand на панель навигации. Для навигационных панелей, которые всегда рушатся, не добавляйте класс .navbar-expand.
Например :
Мобильное меню отображается на большом экране.
Ссылка: https://getbootstrap.com/docs/4.0/components/navbar/
источник
Привет, я думаю, что вы можете сделать это с помощью CSS, как это вы можете изменить меню начальной точки останова
источник
Вот что помогло мне:
источник
В начальной загрузке 4, если вы хотите переопределить, когда navbar-expand- *, разворачивается и сворачивается, показывает и скрывает гамбургер (navbar-toggler), вы должны найти этот стиль / определение в bootstrap.css и переопределить его в своем собственный customstyle.css (или непосредственно в bootstrap.css, если вы так склонны).
Например. Я хотел, чтобы navbar-expand-lg свернулся и показал navbar-toggler на 950px. В bootstrap.css я нахожу:
И ниже этого ...
Я скопировал оба запроса @media и вставил их в свой style.css, затем изменил размер в соответствии со своими потребностями. В моем случае я хотел, чтобы он рухнул на 950 пикселей. Запросы @media должны быть разных размеров (я предполагаю), поэтому я установил максимальную ширину контейнера в 949.98px и использовал 950px для другого запроса @media, поэтому следующий код был добавлен в мой style.css. Это было нелегко отделить от искаженных решений, которые я нашел в Stackoverflow и в других местах. Надеюсь это поможет.
источник
Вот мой рабочий код, использующий в React с Bootstrap
источник
Это теперь поддерживается в Bootstrap 4.4
источник