Я хочу свернуть мой navbar в более раннем разрешении, чем 768px, например 992px, как бы я это сделал? благодарю! (Я знаю, что могу настроить его на странице начальной загрузки, но я не хочу снова запускать проект с новым файлом bootstrap.css)
Bootstrap: как свернуть навигатор раньше
Ответ 1
Если вы не хотите манипулировать Bootstrap с помощью Less/Sass (возможно, потому что вы хотите загрузить его через CDN), вот что помогло мне:
@media (min-width: 768px) and (max-width: 991px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse.collapse.in {
display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
display:block !important;
}
.navbar-header {
float:none;
}
}
Демо: https://jsfiddle.net/0pmy8usr/
Добавьте это в отдельный файл CSS и включите его после bootstrap.css
ОБНОВЛЕНИЕ для Bootstrap 4:
@media(max-width:900px) {
.navbar .navbar-brand {float:none;display: inline-block;}
.navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem;}
.navbar .navbar-nav {float:none !important;}
.nav-item{width:100%;text-align:left;}
.navbar-toggler {display: block !important;}
.navbar-toggleable-sm.collapse {display:none !important}
.navbar-toggleable-sm.collapse.in {display:block !important}
}
Ответ 2
В variables.less
измените
@grid-float-breakpoint: @screen-sm-min
to
@grid-float-breakpoint: @screen-md-min;
Ответ 3
Если вам нужно свернуть свой навигатор в более раннем разрешении, чем 768px, поэтому вам нужно будет использовать @media min-width
и max-width
, и вам не нужно запускать новый проект для этого, просто создайте новый .css (example: custom.css) и вставьте его под свой основной bootstrap.css, чтобы переопределить его значения. и напишите этот код внутри него:
CODE:
@media (min-width: 992px) {
.collapse {
display: none !important;
}
}
Кроме того, вы можете взглянуть на этот пост: изменить разворот навигационной панели.
Надеюсь, это даст вам решение.
Ответ 4
Вы также можете переопределить классы начальной загрузки, которые закрывают пробел. Bellow - это рабочий код, который переопределяет базовые навигаторы с выпадающими меню. Не все классы перегружены ниже, поэтому в зависимости от того, что вы используете, вам может потребоваться переопределить другие классы.
@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;
}
}
Ответ 5
Я бы предложил добавить загрузчик в ваш проект вместо CDN и просто поискать медиазапрос, который выглядит следующим образом:
@media (min-width: 768px) {
.navbar-expand-md {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap; //...etc.
И измените его на:
@media (min-width: 900px) {
.navbar-expand-md {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap; // ...etc.
Или, если вы используете CDN, создайте переопределение для этого конкретного медиа-запроса.