Question

不确定我是否正确行事

#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假设将这些项目折叠成某种下拉状态？还是我误解了这门课的假设？

如何修复它以使项目重新出现在较小的屏幕上？

Answer 1

我认为您错过了button.navbar-toggle.collapsed

上的.navbar-header

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

检查为导航栏here

制作的示例bootrap

您的代码应该类似于jsfiddle

bootstrap nav不会在小屏幕上折叠

1 个答案: