Как сделать выпадающее меню Bootstrap 5.2 на всю ширину страницы
Я пытаюсь создать мегаменю Bootstrap 5.2 с полностраничным фоном, но у меня возникают проблемы.
У меня есть базовая навигация:
<nav class = "navbar navbar-expand">
<div class = "container-fluid">
<div class = "collapse navbar-collapse" id = "navbarNavDropdown">
<ul class = "navbar-nav">
<li class = "nav-item">
<a class = "nav-link active" aria-current = "page" href = "#">Item 1</a>
</li>
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle" href = "#" role = "button" data-bs-toggle = "dropdown" aria-expanded = "false">
Dropdown
</a>
<div class = "dropdown-menu" aria-labelledby = "megaMenuDropdown" style = "background-color: blue;">
<div class = "container" style = "background-color: red;">
<div class = "row">
<div class = "col-12">
COL 12 WITH INSIDE CONTAINER
</div>
</div>
</div>
</div>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Item 3</a>
</li>
</ul>
</div>
</div>
</nav>
Это выглядит так:
Теперь, если я добавлю position: static !important, как вам советуют большинство постов 7-9-летней давности, я получу следующее:
Это близко, но мне нужно, чтобы горизонтальный фон НЕ останавливался на контейнере, а покрывал всю страницу (в моем примере окрашен в синий цвет).
Теперь я могу развернуть его на всю страницу, добавив width: 100vw; к элементу .dropdown-menu, но тогда я получаю следующее:
Его ширина составляет 100 %, но он начинается с элемента триггера nav (а не с начала страницы) и выходит за пределы точки обзора, и я не могу найти решение, которое поместило бы его в начало. Или даже отцентрируйте его, чтобы он хорошо закрывал страницу.
Я нашел в Интернете несколько примеров, в том числе этот, и все они имеют одну и ту же проблему: https://mdbootstrap.com/docs/standard/extended/mega-menu/ Они начинаются от элемента и выходят за окно.
Кто-нибудь знает, как это исправить и сделать меню полной страницей, начиная с левой стороны страницы?
Изменилось ли что-то, что привело к такому поведению, поскольку я не припоминаю, чтобы раньше у меня возникали подобные проблемы?
Проект основан на Bootstrap, и писать собственную навигацию — последнее, чем мне бы хотелось заниматься.
Спасибо.
Ответы 2
Покопавшись еще немного, я обнаружил, что все еще могу принудительно центрировать его с помощью элемента transform:
Таким образом, добавление стиля по умолчанию Bootstrap 5.2 выглядит следующим образом:
<style>
.dropdown-menu {
width: 100vw;
left: 50%;
transform: translate(-50%, 0);
}
</style>
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
.navbar-nav .dropdown-menu {
width: 100vw;
left: 50%;
transform: translate(-50%, -1px);
}
</style>
</head>
<body class = "p-3 m-0 border-0 bd-example m-0 border-0">
<div class = "container">
<div class = "row">
<div class = "col-12">
<!--- START: navigation --->
<nav class = "navbar navbar-expand">
<div class = "container-fluid">
<div class = "collapse navbar-collapse" id = "navbarNavDropdown">
<ul class = "navbar-nav">
<li class = "nav-item">
<a class = "nav-link active" aria-current = "page" href = "#">Item 1</a>
</li>
<li class = "nav-item dropdown position-static">
<a class = "nav-link dropdown-toggle" href = "#" role = "button" data-bs-toggle = "dropdown"
aria-expanded = "false">
Dropdown
</a>
<div class = "dropdown-menu" aria-labelledby = "megaMenuDropdown"
style = "background-color: blue;">
<div class = "container" style = "background-color: red;">
<div class = "row d-flex justify-content-center">
<div class = "col-lg-2 col-md-6">Column 1</div>
<div class = "col-lg-2 col-md-6">Column 2</div>
<div class = "col-lg-2 col-md-6">Column 3</div>
<div class = "col-lg-2 col-md-6">Column 4</div>
<div class = "col-lg-2 col-md-6">Column 5</div>
</div>
</div>
</div>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Item 3</a>
</li>
</ul>
</div>
</div>
</nav>
<!--- END: navigation --->
</div>
</div>
</div>
</body>
</html>PS: Необходимо настроить радиус границ, отступы и т. д., чтобы 0 не выходил за пределы страницы. Поведение по умолчанию имеет все это.
Вот решение с использованием только служебных классов BS:
- сделайте позицию
dropdownстатичной с помощьюposition-static - растяните
dropdown-menuна весь экран и по центру с помощьюvw-100 start-50 translate-middle-x
<li class = "nav-item dropdown position-static">
<div class = "dropdown-menu vw-100 start-50 translate-middle-x"
демо:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class = "p-3 m-0 border-0 bd-example m-0 border-0">
<div class = "container">
<div class = "row">
<div class = "col-12">
<!--- START: navigation --->
<nav class = "navbar navbar-expand">
<div class = "container-fluid">
<div class = "collapse navbar-collapse" id = "navbarNavDropdown">
<ul class = "navbar-nav">
<li class = "nav-item">
<a class = "nav-link active" aria-current = "page" href = "#">Item 1</a>
</li>
<li class = "nav-item dropdown position-static">
<a class = "nav-link dropdown-toggle" href = "#" role = "button" data-bs-toggle = "dropdown"
aria-expanded = "false">
Dropdown
</a>
<div class = "dropdown-menu vw-100 start-50 translate-middle-x" aria-labelledby = "megaMenuDropdown"
style = "background-color: blue;">
<div class = "container" style = "background-color: red;">
<div class = "row d-flex justify-content-center">
<div class = "col-lg-2 col-md-6">Column 1</div>
<div class = "col-lg-2 col-md-6">Column 2</div>
<div class = "col-lg-2 col-md-6">Column 3</div>
<div class = "col-lg-2 col-md-6">Column 4</div>
<div class = "col-lg-2 col-md-6">Column 5</div>
</div>
</div>
</div>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Item 3</a>
</li>
</ul>
</div>
</div>
</nav>
<!--- END: navigation --->
</div>
</div>
</div>
</body>
</html>ну, я думаю, на скриншотах это было недостаточно ясно, и без воспроизводимого примера я не мог сказать... в любом случае, отредактировал ответ, и теперь он должен быть таким же, как ваше решение, только без специального CSS
Это не работает для полной страницы. Как я уже говорил, при этом заполняется только контейнер, а не вся страница. Вы даже можете увидеть это, нажав «Запустить фрагмент кода». Это так же, как на второй картинке, которую я разместил.