Я ссылаюсь на следующий пример на панели навигации, используя Bootstrap:
https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_navbar_form&stacked=h
Копируя HTML, я помещаю его в свой JSP страница Ниже приведена возможная HTML:
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/bootstrap/js/bootstrap.bundle.min.js"></script>
<title>2</title>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
<br>
<div class="container">
<h3>Navbar Forms</h3>
<p>Use the .form-inline class to align form elements side by side inside the navbar.</p>
</div>
</body>
</html>
На обоих IE и Google Chrome высота панели навигации больше, чем в примере, с дополнительными пробелами под элементами управления, как показано ниже. Я обнаружил, что это связано с кнопкой. Если кнопка будет удалена, высота панели навигации будет такой же, как в примере. Что может быть причиной root и как я могу ее устранить? Я использую Bootstrap 4.4.
