Question

使用媒体查询时，我无法使用自举垂直菜单崩溃。

有太多的代码要把它全部放在这里所以我创造了一个小提琴 -

我不介意重新编写菜单，但这是我获得此类菜单的唯一方法。我将我的技术基于此网站，因为这是客户的需求 -

http://www.rhiwbeinaprm.co.uk/

我正在尝试创建他们的主页菜单，但是在bootstrap中，所以它是响应式的。非常感谢任何帮助。

let trueAnswersCount = answersArray.filter{$0 == true}.count

问题是，当滚动到750px及以下时，整个事情就会消失。

Answer 1

导航按钮在哪里？

将ID添加到：<div class="navbar-collapse collapse">

    <div class="navbar-header">
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Bootstrap 3</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
    ...
    </div>

更新小提琴：https://jsfiddle.net/wZVanG/DTcHh/8623/

Answer 2

您的代码存在以下问题：

您在这里使用div和nav复制了一些内容课程navbar。我不知道为什么，但这很奇怪。
您的折叠div没有id。 id将允许按钮将其定位为下拉列表
应该保留button toggle的{{1}}不在您的代码中。
由于您的折叠div没有ID，因此您的下拉按钮不会指向任何内容
您的jsFiddle与此处发布的代码不同....以下代码基于您的jsfiddle中的代码。

Working bootply

您的网站需要花费大量时间来加载，以改善用户体验，您可以考虑在创建加载屏幕后加载js文件。以下代码适用于导航栏。

dropdown

Bootstrap垂直菜单没有折叠

2 个答案:

Working bootply