Как разрешить автоматическое закрытие dropdown меню в Bootstrap 4, после клика на смартфоне? На компьютере всё закрывается. На смартфоне после клика меня остаётся открытым.
<!-- Главное меню -->
<div class="container">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark"
style="background-color: #2B2C7F; box-shadow: 8px 8px 40px rgba(0, 0, 0, 0.5);">
<a class="navbar-brand" href="#"><i class="fas fa-home"></i></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" data-value="main" href="#">ГЛАВНАЯ <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" data-value="news" href="#">НОВОСТИ</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
ПРОДУКЦИЯ
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" data-value="tovar-1" href="#">ТОВАР 1</a>
<a class="dropdown-item" data-value="tovar-2" href="#">ТОВАР 2</a>
<a class="dropdown-item" data-value="tovar-3" href="#">ТОВАР 3</a>
<a class="dropdown-item" data-value="tovar-4" href="#">ТОВАР 4</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-value="photo" href="#">ЗАСТОСУВАННЯ</a>
</li>
<li class="nav-item">
<a class="nav-link" data-value="contacts" href="#">КОНТАКТЫ</a>
</li>
<li>
<a class="nav-link" href="mailto:postmaster@gkj.com.ua" style="color: white;"><i class="fas fa-envelope"></i></a>
</li>
</ul>
</div>
</nav>
</div>