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