Bootstrap 3：nav-pills导航菜单能像导航栏一样折叠吗？

Question

我了解到 Bootstrap 3 随附一个导航栏，当在较小的屏幕上查看时会折叠。然而，我不喜欢这种导航栏的外观，并决定使用 nav-pills 类来设计我的主要导航菜单。是否可能在手机设备上查看时折叠我的 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>

- redshift

Answer 1

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

- Robin

---

使用jQuery的toggle隐藏或显示功能使其可折叠。 - Robin

Answer 2

没关系，最终我只是在手机屏幕上隐藏了那个菜单，然后使用下拉菜单来代替它。

- redshift

Answer 3

这里有一段在Youtube上展示如何操作的视频: Bootstrap 3.1教程1 - 默认响应式网格布局! 这个视频中，Dave做了两个导航栏，一个是navbar，另一个是nav-pills。Navbar只在XS尺寸下可见，而nav-pills则在XS尺寸下隐藏。

- Bogac