引导导航不会在小屏幕上崩溃答案

【问题标题】：bootstrap nav not collapsing on small screens引导导航不会在小屏幕上崩溃
【发布时间】：2015-07-12 00:54:59
【问题描述】：

不确定我是否做得对

#navigation.navbar.navbar-default.navbar-fixed-top
.container
    .navbar-header
        %button.navbar-toggle.collapsed{"aria-expanded" => "false", "data-target" => "#navbar-1", "data-toggle" => "collapse", :type => "button"}
            %span.sr-only Toggle
            %span.icon-bar
            %span.icon-bar
            %span.icon-bar
        %b= link_to "TITLE", root_path, class: 'navbar-brand'
    #full-screen-nav
        .navbar-collapse.collapse#navbar-1
            %ul.nav.navbar-nav
                %li Item 1...

现在当屏幕尺寸宽度小于 640 时，所有项目 (item1, item2,...) 都会消失，只在导航栏中留下 TITLE。

我认为navbar-collapse.collapse 应该将这些项目折叠成某种下拉菜单？还是我误解了这个类应该做什么？

我该如何解决这个问题，以便项目重新出现在较小的屏幕上？

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我认为你错过了 .navbar-header 上的 button.navbar-toggle.collapsed

此按钮将显示/隐藏您的菜单。

查看为导航栏 here 制作的示例引导程序

您的代码应该类似于 jsfiddle

【讨论】：

我已经添加了代码，现在出现了一个图标。但是当我点击它时，没有显示下拉菜单。现在发生了什么？
@user3277633 按钮上是否有“数据目标”并将 div 的 id 设置为折叠？
是的，我已经编辑了上面的代码，如果正确请告诉我！还是不行
您的 .navbar-collapse.collapse#navbar-1 应该与您的 .navbar-header 处于同一级别
修复了这个问题，但它似乎仍然无法正常工作。有趣的是，它适用于 jsfiddle。我在这里错过了与引导程序无关的东西吗？ jsfiddle.net/x19gn9hp