В проекте, над которым я работаю, мой navbar хороший и отзывчивый. Мои другие темы, например, как на изображении «Найти группу», также имеют панель. Эти столбцы и нижний колонтитул имеют одинаковую ширину. Я хотел бы сделать мою навигационную панель такой же ширины. Я пробовал с padding, поля, witdhs et c. но ничего не работает. работает для начала, но не Resposive. Как только я посмотрю его в мобильной версии, он будет другого размера. Я создал навигационную панель с бургерменю с bootstrap.
. Я был бы очень признателен, если бы кто-то мог помочь или дать советы! :)
.navbar {
margin: auto;
height: 10.5%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Navbar-Fragment</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
</head>
<body>
<div th:fragment="nav">
<div>
<nav id="navigation" class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="basicExampleNav">
<ul class="navbar-nav mr-auto navbar-dark bg-dark" data-toggle="collapse" data-target=".navbar-collapse">
<li class="nav-item"><a class="nav-link" href="https://localhost:8443/#top">Home</a></li>
<li class="nav-item"><a class="nav-link" href="https://localhost:8443/#ContactUsForm"> Contact Us</a></li>
<li class="nav-item"><a class="nav-link" href="https://localhost:8443/#AboutUs">About Us</a></li>
</ul>
</div>
</nav>
</div>
</body>
</html>