Как я могу редактировать это раскрывающееся меню Bootstrap5?
Мне нужно сделать выпадающее меню как эта страница без контента, занимающего всю ширину страницы. Мне также нужно сделать все «лоремные» ссылки меню центральными в навигационной панели. Я не могу редактировать классы начальной загрузки, поэтому не могу это сделать. Как я могу это исправить? (пожалуйста, откройте его на полной странице, и я не знаю, почему с вырезанным кодом меню наведения не работает)
.navbar-nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar a:hover {
text-decoration: underline;
}
.navbar-nav {
display: flex;
align-items: center;
justify-content: space-between;
}
.dropdown-menu {
font-size: 0.8rem;
left: 0;
border: none;
text-align: center;
position: absolute;
border-radius: 0;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
display: grid;
grid-template-columns: auto auto auto auto auto;
visibility: hidden;
min-width: 100%;
z-index: 999;
}
.dropdown:hover .dropdown-menu {
visibility: visible;
}
.dropdown-menu.show {
display: flex;
}
.dropdown-menu a:hover {
color: darkgrey;
text-decoration: none;
}
.dropdown-menu li:first-child a {
color: darkgrey;
padding: 20px 0;
}<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin = "anonymous">
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin = "anonymous"></script>
<nav class = "navbar navbar-expand-lg navbar-light bg-light">
<div class = "container-fluid">
<button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#navbarSupportedContent" aria-controls = "navbarSupportedContent" aria-expanded = "false" aria-label = "Toggle navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
<ul class = "navbar-nav me-auto mb-2 mb-lg-0">
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle" href = "" role = "button" data-bs-toggle = "dropdown" aria-expanded = "false">Lorem</a>
<div class = "dropdown-menu">
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
</div>
</li>
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle" href = "" role = "button" data-bs-toggle = "dropdown" aria-expanded = "false">Lorem</a>
<div class = "dropdown-menu">
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
</div>
</li>
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle" href = "" role = "button" data-bs-toggle = "dropdown" aria-expanded = "false">Lorem</a>
<div class = "dropdown-menu">
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
</div>
</li>
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle" href = "" role = "button" data-bs-toggle = "dropdown" aria-expanded = "false">Lorem</a>
<div class = "dropdown-menu">
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
</div>
</li>
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle" href = "" role = "button" data-bs-toggle = "dropdown" aria-expanded = "false">Lorem</a>
<div class = "dropdown-menu">
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
</div>
</li>
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle" href = "" role = "button" data-bs-toggle = "dropdown" aria-expanded = "false">Lorem</a>
<div class = "dropdown-menu">
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</nav>@CBroe, окей, спасибо, а сделать так, чтобы все ссылки отображались по всей ширине? например, justify-content: space-around (это не работает)
—
15.05.2024 13:26
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
50
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Вы можете добавить margin: 0 auto; к своему .navbar-nav. Это приведет к применению полей одинакового размера с обеих сторон вашего элемента, что сделает его центрированным по горизонтали.
.navbar-nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar a:hover {
text-decoration: underline;
}
.navbar-nav {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
}
.dropdown-menu {
font-size: 0.8rem;
left: 0;
border: none;
text-align: center;
position: absolute;
border-radius: 0;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
display: grid;
grid-template-columns: auto auto auto auto auto;
visibility: hidden;
min-width: 100%;
z-index: 999;
}
.dropdown:hover .dropdown-menu {
visibility: visible;
}
.dropdown-menu.show {
display: flex;
}
.dropdown-menu a:hover {
color: darkgrey;
text-decoration: none;
}
.dropdown-menu li:first-child a {
color: darkgrey;
padding: 20px 0;
}<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin = "anonymous">
<script src = "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity = "sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin = "anonymous"></script>
<nav class = "navbar navbar-expand-lg navbar-light bg-light">
<div class = "container-fluid">
<button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#navbarSupportedContent" aria-controls = "navbarSupportedContent" aria-expanded = "false" aria-label = "Toggle navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
<ul class = "navbar-nav me-auto mb-2 mb-lg-0">
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle" href = "" role = "button" data-bs-toggle = "dropdown" aria-expanded = "false">Lorem</a>
<div class = "dropdown-menu">
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
</div>
</li>
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle" href = "" role = "button" data-bs-toggle = "dropdown" aria-expanded = "false">Lorem</a>
<div class = "dropdown-menu">
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
</div>
</li>
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle" href = "" role = "button" data-bs-toggle = "dropdown" aria-expanded = "false">Lorem</a>
<div class = "dropdown-menu">
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
</div>
</li>
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle" href = "" role = "button" data-bs-toggle = "dropdown" aria-expanded = "false">Lorem</a>
<div class = "dropdown-menu">
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
</div>
</li>
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle" href = "" role = "button" data-bs-toggle = "dropdown" aria-expanded = "false">Lorem</a>
<div class = "dropdown-menu">
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
</div>
</li>
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle" href = "" role = "button" data-bs-toggle = "dropdown" aria-expanded = "false">Lorem</a>
<div class = "dropdown-menu">
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
<ul>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
<li><a class = "dropdown-item" href = "">Lorem Ipsum</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</nav>Спасибо, это работает. а сделать так, чтобы все ссылки отображались по всей ширине? например, justify-content: space-around (это не работает)
—
15.05.2024 13:21
@FedericoMonetti примените width: 100%; к элементу, и ссылки начнут распространяться. Рекомендуем также использовать максимальную ширину для действительно больших экранов.
—
15.05.2024 13:30
@Yogi, я могу без проблем запустить фрагмент кода. Вы уверены, что не застряли в адаптивном режиме просто потому, что не открыли его на всю страницу?
—
15.05.2024 13:44
как я могу сделать раскрывающееся меню со 100% страницы? Как страница, на которую я ссылаюсь
—
15.05.2024 18:13
Другие вопросы по теме
Как определить, открыт ли какой-либо модальный <диалог>?
Javascript заменяет дочерние узлы, заставляя их изменяться на [object HTMLTableSectionElement]
Что делает ширина CSS: 100% в гибком элементе?
Vue.js обновляет html данными по определенному значению индекса
Адаптивные изображения медиабиблиотеки Laravel
Отображение адаптивного индикатора выполнения с процентами с использованием JS и HTML
Разделение HTML-файла и сохранение фрагментов с помощью LangChain
Как сделать так, чтобы карточки отображались слева направо и переходили на следующую строку?
Атрибуты массива
Как использовать переменную для итерации в шаблоне Django?
Похожие вопросы
Маркеры React Leaflet не отображаются с данными о местоположении, полученными из API с использованием useEffect
Как определить, открыт ли какой-либо модальный <диалог>?
Javascript заменяет дочерние узлы, заставляя их изменяться на [object HTMLTableSectionElement]
Строки сортировки javascript, начинающиеся с числа, не работают
Как написать универсальный код, используя API композиции в Quasar?
Vue.js обновляет html данными по определенному значению индекса
Не удалось применить плагин com.facebook.react.rootproject
Запретить кэширование URI данных в качестве источника изображения?
Как исправить высоту и ширину веб-сайта на мобильном телефоне в React JS?
Отображение адаптивного индикатора выполнения с процентами с использованием JS и HTML
Чтобы центрировать ссылки, удалите класс
me-autoизulи добавьте классjustify-content-centerв#navbarSupportedContent.