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

【问题标题】：How to show collapse menu in mobile only?如何仅在移动设备中显示折叠菜单？
【发布时间】：2014-07-15 07:51:32
【问题描述】：

我有一个 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 和桌面。我该如何克服这个问题？

【问题讨论】：

请链接到示例或工作小提琴。 visible-xs 是正确的 Bootstrap 3 类，仅用于手机中的可见性。

标签： html css twitter-bootstrap

【解决方案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>

【讨论】：

那你能接受我的回答吗？这个问题仍然活跃。谢谢：D
我希望你指出你所做的改变，因为我不知道是什么解决了它

【解决方案2】：

我相信问题出在您的navbar 班级。您缺少role="navigation"，这使得导航栏可以从不同的设备和大小访问。你也不应该需要visible-phone。

变化：

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

收件人：

<div class="navbar navbar-fixed-top visible-phone" role="navigation">

另一个问题可以通过改变来解决：

<div class="nav-collapse collapse">

收件人：

<div class="collapse navbar-collapse">

【讨论】：

role="navigation" 除了让 ARIA 更易于访问之外没有任何作用。

【解决方案3】：

您可能缺少用于启用响应的视口元标记as mentioned in the Bootstrap docs?：

<meta name="viewport" content="width=device-width, initial-scale=1">

【讨论】：