I refer to the following example on navbar using Bootstrap:
https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_navbar_form&stacked=h
Copying the HTML, I put it in my JSP page. The following is the eventual 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>
On both IE and Google Chrome, the navbar's height is bigger than the one in the example, with the extra spaces below the controls, as shown below. I found that this is due to the button. If the button is removed, the navbar's height would be the same as in the example. What could be the root cause and how can I resolve it? I am using Bootstrap 4.4.
