Bootstrap - свернуть панель навигации, как только окно просмотра станет недостаточно широким?
В настоящее время моя навигационная панель оформлена так, чтобы ее фон «сжимался» до ширины содержимого, а не шире:
<nav class = "navbar fw-bold h5 rounded-5 navbar-expand d-inline-flex">
<div class = "container-fluid">
<ul class = "navbar-nav">
<li class = "nav-item">
<NavLink class = "nav-link" :to = "{ name: 'Home' }">Home</NavLink>
</li>
[...]
</ul>
</div>
</nav>
Поведение Bootstrap по умолчанию заключается в сворачивании навигационной панели с определенной предустановленной шириной в пикселях, например, 992 пикселя с .navbar-expand-lg:
Однако я бы хотел, чтобы панель навигации сворачивалась только тогда, когда область просмотра перестает быть достаточно широкой для ее размещения, например, когда горизонтальная полоса прокрутки появляется в следующем снимке:
Можно ли это сделать с помощью стиля Bootstrap? Похоже, что он предназначен только для работы с набором «точек останова» фиксированной ширины пикселей, а не для разрыва естественной ширины содержимого.
Нет, я ищу чистый CSS.
Ответы 1
Вы должны предварительно определить или использовать предварительно определенные значения. Вы можете сделать это даже без компиляции файлов sass, если вы готовы согласиться на контрольные точки по умолчанию.
Из https://stackoverflow.com/a/36289507/3807365:
<nav class = "navbar fixed-top navbar-expand-sm">..</nav>
- navbar-expand-sm = мобильное меню на экранах xs <576px
- navbar-expand-md = мобильное меню на экранах sm <768px
- navbar-expand-lg = мобильное меню на экранах md <992px
- navbar-expand-xl = мобильное меню на экранах LG <1200px
- navbar-expand = никогда не использовать мобильное меню
- (без расширения класса) = всегда использовать мобильное меню
Вы также можете использовать пользовательскую точку останова (???px), добавив немного CSS.
Например вот 888px:
@media (max-width: 887.98px) {
.navbar-expand-my>.container,
.navbar-expand-my>.container-fluid,
.navbar-expand-my>.container-sm,
.navbar-expand-my>.container-md,
.navbar-expand-my>.container-lg,
.navbar-expand-my>.container-xl {
padding-right: 0;
padding-left: 0
}
}
@media (min-width: 888px) {
.navbar-expand-my {
flex-flow: row nowrap;
justify-content: flex-start
}
.navbar-expand-my .navbar-nav {
flex-direction: row
}
.navbar-expand-my .navbar-nav .dropdown-menu {
position: absolute
}
.navbar-expand-my .navbar-nav .nav-link {
padding-right: .5rem;
padding-left: .5rem
}
.navbar-expand-my>.container,
.navbar-expand-my>.container-fluid,
.navbar-expand-my>.container-sm,
.navbar-expand-my>.container-md,
.navbar-expand-my>.container-lg,
.navbar-expand-my>.container-xl {
flex-wrap: nowrap
}
.navbar-expand-my .navbar-nav-scroll {
overflow: visible
}
.navbar-expand-my .navbar-collapse {
display: flex !important;
flex-basis: auto
}
.navbar-expand-my .navbar-toggler {
display: none
}
}
Наконец, если вы скомпилируете свои файлы sass (см. выше), вы можете добавить свою точку останова (или изменить другие) для этой переменной:
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
custom: 888px,
lg: 992px,
xl: 1200px
) !default;
Дело в том, что я не хочу указывать конкретную ширину точки останова; Я хочу, чтобы он сломался, когда доберется до естественной ширины содержимого панели навигации.
В этом случае я тоже подумал об этом, вы можете обнаружить с помощью javascript, а затем применить некоторые стили. Это то, что вас интересует?
Не совсем, я хочу решение на чистом CSS. Я уверен, что это возможно.
Невозможно делать то, что вы хотите, без использования JavaScript.
Я думаю, что это возможно только в том случае, если вы используете JavaScript рядом с кодом CSS. Насколько я знаю, это невозможно без использования JavaScript @Jez
Да, ок. Я полагаю, что нет способа CSS. Потребуется что-то вроде псевдокласса :would-overflow.
Итак, вас интересуют решения с использованием JavaScript?