Есть ли способ увеличить точку, в которой сбрасывается бутстрап 3 navbar (т.е. он сворачивается в выпадающее меню на портретных планшетах)?
Эти два варианта применимы к бутстрапу 2, но не сейчас!
Как изменить порог сворачивания navbar с помощью Twitter-загрузки?
Сегодня у меня была такая же проблема.
Вот упрощенное решение только для CSS, чтобы активировать сбой при размере sm:
@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-переменную в файле 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, вам придется перезаписать стили, которые будут применяться в запросе media 768px, и вернуть их к предыдущему значению. Затем повторно добавьте их в соответствующее время.
Я не уверен, есть ли лучший способ сделать это. Перекомпиляция Bootstrap МЕНЬШЕ к вашим потребностям - лучший (самый простой) способ. В противном случае вам придется найти все мультимедийные запросы 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.
Моя проблема заключалась в том, что navbar рухнул соответственно по правильной ширине, но кнопка меню не работала. Я не мог расширять и сворачивать меню.
Это связано с тем, что класс 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-переменные в переменных. Отсутствие ответных точек прерывания устанавливается по строке 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 */
}
Заполнение по умолчанию равно 15px с обеих сторон (влево и вправо).
Если вы предпочитаете менять каждую отдельную сторону, используйте:
padding-left: 7px;
padding-right: 8px;
Этот параметр также влияет на раскрывающийся список.
Это не отвечает на вопрос, но может помочь другим, кто не хочет связываться с CSS или использовать LESS-переменные. Два общих подхода к решению этой проблемы.
Набвар рухнет на небольших устройствах. Точка свертывания определяется по @grid-float-breakpoint в переменных. По умолчанию это будет до 768px. Для экранов под шириной экрана 768 пикселей навигационная панель будет выглядеть так:
Можно изменить @grid-float-breakpoint в переменных .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 в div с классом sidebar, чтобы отделить поведение, которое я хотел, чтобы оно не повлияло на другие навигаторы на моем сайте, например, в главном меню. Отрегулируйте свои потребности, надейтесь, что это поможет.
/* 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 (расширяется с шириной менее 768 пикселей), это необходимо 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, чтобы правильно расположить меню для всех размеров экрана.
Надеюсь, что это поможет.