Есть вот такое простое меню:
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Brand</a>
<a class="close" id="close-nav" data-target="#navbar" data-toggle="collapse">×</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
В нем есть ссылка
<a class="close" id="close-nav" data-target="#navbar" data-toggle="collapse">×</a>
, которая в телефонном разрешении прекрасно сворачивает и разворачивает блок с id="navbar". А на большом разрешении collapse не работает.
Есть ли возможность через Bootstrap сделать сворачивание меню при нажатии на ссылку в любом разрешении?