Изменение точки останова на панели навигации при загрузке без использования МЕНЬШЕ

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

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

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

2018 ОБНОВЛЕНИЕ

Бутстрап 4

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

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

Если вы исключите navbar-expand-* мобильное меню будет использоваться на all ширинах. Ниже приведена демонстрация всех 6 состояний навигационной системы: пример 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 Breakpoint

Бутстрап 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 пикселей . Если вам нужно изменить его на менее чем 768 пикселей, здесь будет приведен пример ниже 768px .

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

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

Перейдите к строке 2923 в bootstrap.css (также min version) и измените @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; } } 

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

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

Значение соответствия @grid-float-breakpoint-max устанавливается равным минус 1px:

 //**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; 

Я просто сделал это успешно, используя следующий код 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; } } 

Способ Sass для изменения параметров начальной загрузки фактически документируется на странице gistub bootstrap-sass .

Просто переопределите переменные перед загрузкой @import:

 $grid-float-breakpoint: 1000px; @import 'bootstrap'; 

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

  @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; } } 

демо-код

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

например:

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

С кнопкой для навигации:

• скрытый-см-вверх
• скрытый-мкр-вверх
• скрытый-LG-вверх

Для 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; } } 

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

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

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

В противном случае Search & Replace является вашим лучшим другом прямо в версии css …

Это сработало для меня 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; } 

Привет, я думаю, вы можете сделать это с помощью 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; } } 

Вот что сделал трюк для меня:

 @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; } 

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

Например. Я хотел, чтобы navbar-expand-lg обрушился и отображает навигатора в 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 и засунул их в свой стиль.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%; } } 

Здесь мой рабочий код используется в React with Bootstrap