使nav-pills可以像boot -rap中的nav-bar一样折叠

Question

我们正在开发一个应用程序,我们正在使用twiiter bootstrap 3我们创建了一个带导航丸的导航栏

   <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>                        

任何具有自举经验的人都可以帮助我们,如果我们可以使这个导航丸可以折叠和响应大小减少就像我们可以轻松使用导航栏一样吗？

提前致谢

Answer 1

首先,您需要在菜单折叠后为菜单按钮添加HTML.

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
</div>

然后,你需要nav-pills包含一个包含Bootstrap崩溃类的div.

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <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>
</div>

然后你可以用这一切的液体容器和Bootstrap的navbar navbar-default使用role=navigation.

此外,您可以添加一些jQuery来处理折叠菜单时的"堆叠",而不是保持水平.要做到这一点,Bootstrap的显示/隐藏崩溃事件将起到作用:show.bs.collapse和hide.bs.collapse.

//Stack menu when collapsed
$('#bs-example-navbar-collapse-1').on('show.bs.collapse', function() {
    $('.nav-pills').addClass('nav-stacked');
});

//Unstack menu when not collapsed
$('#bs-example-navbar-collapse-1').on('hide.bs.collapse', function() {
    $('.nav-pills').removeClass('nav-stacked');
});

在这里工作演示

Answer 2

另一种尝试的方法是设置navbar li为100%:

@media (max-width: 768px) {
  #navbar li { width:100%; }
}