Bootstrap 3: nav-pills菜单可以像navbar那样崩溃吗？

Question

我知道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>

Answer 1

Youtube上的一段视频展示了如何做到这一点：Bootstrap 3.1 Tutorial 1 - Responsive Grid Layouts By Default!

基本上，Dave在这段视频中做了两个导航栏，一个是导航栏，另一个是导航栏。Nabvar仅在xs大小中可见，而nav-pills在xs中隐藏。

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

Answer 3

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