В начальной загрузке 4, если вы хотите переоценить, когда Navbar-Expand-*, расширяется, обрушивается, показывает и скрывает гамбургер (Navbar-toggler), вы должны найти этот стиль/определение в Bootstrap.css и переопределить его в своем Собственный customstyle.css (или непосредственно в Bootstrap.css, если вы так склонны).
Например. Я хотел, чтобы Navbar-Expand-LG обрушился и показывал Navbar-Toggler в 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 и сунул их в свой стиль. Я мой случай, я хотел, чтобы он рухнул на 950px. Запросы @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%;
}
}