У завантажувальному інструменті 4, якщо ви хочете перевтоматись, коли navbar-expand- *, розширюється та згортається, показує та приховує гамбургер (navbar-toggler), ви повинні знайти цей стиль / визначення у bootstrap.css та перезначити його у своєму власний customstyle.css (або безпосередньо в bootstrap.css, якщо ви так схильні).
Напр. Я хотів, щоб navbar-extension-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 і встав їх у мій style.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%;
}
}