Bootstrap nav - оставайтесь развернутыми, когда на рабочем столе и складными на мобильном
Вот как выглядит мой navbar на данный момент:
<nav class="navbar-default navbar-static-side new-dash-bg" role="navigation">
<div class="sidebar-collapse">
<ul class="nav new-dash-bg" id="side-menu">
<li class="nav-header new-dash-bg">
<div class="dropdown profile-element">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<span class="clear"> <span class="block m-t-md"> <strong class="font-bold">Dashboard</strong>
</span>
</div>
<div class="logo-element">
CTRL+
</div>
</li>
<li class="active">
<a href="index.html"><i class="fa fa-th-large"></i> <span class="nav-label">MANAGE</span> <span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li><a id="serv-feed" href="#">Services</a></li>
<li><a id="activity-feed" href="#">Activity Feed</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-info-circle"></i> <span class="nav-label">SUPPORT</span><span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li><a href="#">Guideline</a></li>
<li><a href="#">Q & A</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-cog"></i> <span class="nav-label">ACCOUNT</span><span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li><a href="#">Company</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Billings & Payment</a></li>
<li><a href="#">Settings</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Как я могу убедиться, что на экранах рабочего стола и выше меню второго уровня не свернуто? Таким образом, чтобы их развернуть на рабочем столе.
1 ответ
Bootstrap имеет два класса collapse
а также navbar-collapse
<div class="collapse navbar-collapse">
<ul>
.............
.............
</ul>
</div>