我们正在开发一个应用程序,使用 Twitter Bootstrap 3。我们已经用 nav-pills 创建了一个导航栏。
<ul class="nav nav-pills head-menu">
<input type="hidden" id="selected_menu_item" value="=$selectedMenuId; ?>" />
<li>
<a href="#" id="welcome">
Welcome text ...
</a>
</li>
<li><a href="#" id="kitchen">Kitchen</a></li>
<li><a href="#" id="programma" > Programma</a></li>
<li><a href="#" id="foodart" >foodart text</a></li>
</ul>
有 Bootstrap 经验的人能帮我们吗?就像我们可以轻松地对导航栏进行折叠和响应式处理一样,如果我们可以使这个 "nav-pills" 在尺寸缩小时也可以折叠和响应式处理。
提前致谢。
$('#menu-selector').on('show.bs.collapse hidden.bs.collapse', function () { $(this).find('.nav-pills').toggleClass('nav-stacked'); });
- Michael Humelsine<div class="container-fluid"><nav class="navbar navbar-default" role="navigation">
里面(作者在文本中也提到了)。此外,navbar-header
可能会添加自己的默认背景色,所以如果你不想要它,可以使用.navbar-default { background:transparent; border-color: transparent; }
。另外,为了让它看起来更漂亮,我使用了$('.nav-pills').addClass('nav-stacked nav-justified');
和$('.nav-pills').removeClass('nav-stacked nav-justified');
。 - Anupam