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

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

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

Answer 3

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

基本上Dave在这个视频中做了什么，他制作了2个导航栏，其中一个带导航栏，其他带导航丸。 Nabvar仅在xs大小中可见，nav-pills隐藏在xs中。

Bootstrap 3：nav-pills导航菜单可以像导航栏一样崩溃吗？

3 个答案: