4

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

3 回答 3

3 
<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>
于 2013-10-20T04:16:38.403 回答
2

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

于 2013-10-20T00:55:29.183 回答
2

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

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

于 2014-07-21T10:39:12.147 回答