I'm currently utilizing Bootstrap 4 and have applied a CSS style to the drop-down menu:
.dropdown .dropdown-menu {
-webkit-transition: max-height 0.5s, opacity 0.2s 0.1s, visibility 0s 4s;
-moz-transition: max-height 0.5s, opacity 0.2s 0.1s, visibility 0s 4s;
-ms-transition: max-height 0.5s, opacity 0.2s 0.1s, visibility 0s 4s;
-o-transition: max-height 0.5s, opacity 0.2s 0.1s, visibility 0s 4s;
transition: max-height 0.5s, opacity 0.2s 0.1s, visibility 0s 4s;
max-height: 0;
display: block; /* this property */
overflow: hidden;
opacity: 0;
visibility: hidden;
}
.dropdown.show .dropdown-menu {
-webkit-transition: max-height 0.9s, opacity 0.2s, visibility 0s;
-moz-transition: max-height 0.9s, opacity 0.2s, visibility 0s;
-ms-transition: max-height 0.9s, opacity 0.2s, visibility 0s;
-o-transition: max-height 0.9s, opacity 0.2s, visibility 0s;
transition: max-height 0.9s, opacity 0.2s, visibility 0s;
max-height: 290px;
opacity: 1;
visibility: visible;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="SupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
... (this part has been shortened for brevity) ...
</div>
</nav>
... (this part has been shortened for brevity) ...
</html>The issue I encountered is that the display: block; attribute resulted in an unwanted margin at the bottom on mobile devices:
https://i.sstatic.net/GNFuP.jpg
How can I resolve this problem?