Bootstrap 3：nav-pills 导航菜单可以像导航栏一样折叠吗？答案

【问题标题】：Bootstrap 3: Can a nav-pills nav menu collapse like navbar?Bootstrap 3：nav-pills 导航菜单可以像导航栏一样折叠吗？
【发布时间】：2013-10-28 15:42:33
【问题描述】：

我了解 Bootstrap 3 附带的导航栏在较小的屏幕上查看时会折叠。但是，我不喜欢导航栏的外观，并决定使用nav-pills 类来设置我的主导航菜单的样式。在手机设备上查看时是否可以折叠我的导航药丸菜单？这是我的导航代码：

<nav>
    <ul class="nav nav-pills">
        <li><a href="#"><strong>HOME</strong></a></li>
        <li class="active"><a href="#"><strong>CAPABILITIES</strong></a></li>
        <li><a href="#"><strong>Careers</strong></a></li>
        <li><a href="#"><strong>Contracts</strong></a></li>
        <li><a href="#"><strong>About Us</strong></a></li>
        <li><a href="#"><strong>News</strong></a></li>
        <li><a href="#"><strong>Contact us</strong></a></li>
    </ul>
</nav>

【问题讨论】：

标签： css responsive-design twitter-bootstrap-3

【解决方案1】：

这是 Youtube 上的一段视频，展示了它是如何完成的： Bootstrap 3.1 Tutorial 1 - Responsive Grid Layouts By Default!

基本上 Dave 在此视频中所做的事情是，他制作了 2 个导航栏，一个带有 navbar，另一个带有 nav-pills。 nabvar 只在 xs 大小可见，而 nav-pills 隐藏在 xs 中。

【讨论】：

【解决方案2】：

<nav>
    <ul class="nav nav-pills visible-sm visible-xs">
        <li><a href="#"><strong>HOME</strong></a></li>
        <li class="active"><a href="#"><strong>CAPABILITIES</strong></a></li>
        <li><a href="#"><strong>Careers</strong></a></li>
        <li><a href="#"><strong>Contracts</strong></a></li>
        <li><a href="#"><strong>About Us</strong></a></li>
        <li><a href="#"><strong>News</strong></a></li>
        <li><a href="#"><strong>Contact us</strong></a></li>
    </ul>
</nav>

【讨论】：

使用 jquery 切换隐藏或显示功能使其可折叠。

【解决方案3】：

没关系，当屏幕用于手机时，我最终只是隐藏了该菜单，然后使用下拉菜单代替该菜单。

【讨论】：