Я работаю над сайтом, и у меня возникают проблемы с настройкой навигационной панели.Я хочу, чтобы все навигационные ссылки центрировались при развертывании навигационной панели, но НЕ, когда навигационная панель находится в свернутом виде.Когда он в свернутом виде, я бы хотел, чтобы они были вертикально сложены и выровнены по левой стороне страницы.Я могу успешно выровнять ссылки по центру ИЛИ выровнять по левому краю при сжатии, но не обоими.
Вот мой HTML-код с кодом навигационной панели.В элементе navbar ul с классом abs-center-x это был метод, который я ранее пробовал, и вы увидите, что он закомментирован в CSS, если это поможет.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/main.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-lg bg-dark justify-content-center sticky-top">
<a href="./index.html" class="navbar-brand">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="mainNav">
<ul class="navbar-nav abs-center-x" id="navElements">
<li class="nav-item active">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Prelicensing</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Schedule & Cost</a>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Defensive Driving</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Road Test Prep.</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">FAQ</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Reviews</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
Это мой CSS сКласс abs-center-x закомментирован и мой текущий код.
/*
.abs-center-x {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
*/
@media (max-width: 768px) {
.navbar-nav {
float: none;
margin: 0 auto;
display: block;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
}
К сожалению, я уже попробовал большинство ресурсов здесь, в Переполнении стека, и не могу найти решение.
Спасибо за помощь!
- Trifex