html - 如何仅在移动设备中显示折叠菜单？

Question

我有一个 bootstrap 3 折叠菜单。

在iphone中是这样的:

代码如下:

<div class="navbar navbar-fixed-top visible-phone">
    <div class="navbar-inner">
        <div class="container">

            <!--Button to collapse the Navigation-->
            <a class="btn btn-navbar" data-toggle="collapse"
               data-target=".nav-collapse">
                <img src="images/expand-menu-button.png"></a>
                <div class="nav-collapse collapse">
                    <ul class="nav nav-justified">
                        <li><a href="#">Velkommen</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle"
                               data-toggle="dropdown">
                                <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="Personale"</a></li>

                                </ul>
                            </li>
                        </ul>
                    </div>
                    <!--/.nav-collapse -->
                </div>
            </div>
        </div> 

但我需要在 ipad 和桌面上显示正常菜单。现在这个菜单按钮也适用于 ipad 和桌面。我该如何克服这个问题？

Answer 1

看看这个，也许它会有所帮助。如果您在桌面窗口中缩放它，它会在必要时适本地跳转到移动显示。

<nav role="navigation" class="navbar navbar-default">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        Welcome
    </div>
    <!-- Collection of nav links and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-left">
            <li>Link 1</li>
            <li>Link 2</li>
        </ul>
    </div>
</nav>