Bootstrap折叠导航问题

Question

因此，我获得了以下代码，该按钮在某种程度上可以正常工作，因为它可以折叠菜单的容器，但是即使容器已折叠，文本/菜单选项仍然存在。

这是一个由雨果生成的网站中的menu.partial。

Bootstrap bootstrap.no-icons.min.css正在加载到标题中。

<nav class="navbar navbar-default navbar-sticky ">
    <div class="container-fluid">

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

        <div id="mobilenav" class="collapse in">
            <ul id="mobilenav1" class="collapse in">
                <li><a href="/index.html">Home</a></li>
                <li><a href="/about/">About</a></li>
            </ul>
        </div><!--/.nav-collapse -->

    </div>
</nav>

想法是，当移动设备正在查看站点时，菜单会具有一个切换按钮以折叠现有菜单。

关于如何使其正常工作的任何想法？