引导导航切换答案

【问题标题】：Bootstrap Navigation Toggle引导导航切换
【发布时间】：2016-11-16 04:39:40
【问题描述】：

我有一个网页，它有一个标准的引导标题（带有徽标和下拉部分）和一个用于导航的侧边栏。当屏幕尺寸较小时，我试图让侧边栏折叠。为此，我制作了一个切换按钮，可以很好地折叠菜单。但问题是，即使关闭可折叠菜单，某些内容似乎仍然显示在所有内容之上。这是一个屏幕截图，向您展示我的意思。

紫色框显示即使关闭菜单，其内容也会以某种方式显示在其他元素之上。有解决办法吗？代码如下：

    <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="#side" class="btn btn-default btn-primary pull-left navbar-toggle" data-toggle="collapse"><span class="caret"></span></a>
            <a class="navbar-brand pull-right" href="#">Company Logo</a>
        </div>
        <ul id="side" class="nav navbar-nav collapse visible-xs">
            <li><a href="#">Home</a></li>
            <li><a href="stuff.html">Stuff</a></li>
            <li><a href="list.html">List Example</a></li>
            <li><a href="#">Contacts</a></li>
            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">User <span class="caret"> </span> </a> 
                <ul class="dropdown-menu">
                    <li><a href="#">Profile</a></li>
                    <li><a href="#">Logout</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </nav>

【问题讨论】：

为什么将visible-xs 应用于下拉列表？这将迫使导航在小屏幕上可见。
@RobertC 好的哇。这解决了我的问题。我犯了一个愚蠢的错误。非常感谢！

标签： css twitter-bootstrap-3 collapsable

【解决方案1】：

尝试将其添加到导航栏标题

<div class="navbar-header">
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
           </div>

并从那里删除可见的xs。

【讨论】：