0

我正在尝试使用 Bootstrap 3 制作导航栏。但是从导航栏部分复制第一个示例，我得到了一个最初完全隐藏在大屏幕上的导航栏。然后，如果我缩小屏幕，我会最小化移动（堆叠）版本。所以在这两种情况下，导航栏都是隐藏的。

如果我尝试删除collapse它在大屏幕上可见的类，但也在移动设备上（堆叠版本）。

我应该怎么做才能让它在大屏幕上可见并在移动设备上隐藏？

我使用以下 HTML（玉模板语法）

nav.navbar(role='navigation)                                                                                      
    .navbar-header                                                                                                
        button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-ex1-collapse')           
            span.sr-only                                                                                          
            span.icon-bar
            span.icon-bar                                                                                         
            span.icon-bar
        a.navbar-brand(href='/')                                                                                  
            img(src='/images/logo.png')
    .collapse.navbar-collapse.navbar-ex1-collapse
        ul.nav.navbar-nav
            li: a(href='/') Link 1
            li: a(href='/') Link 2 
            li.dropdown                                                                                           
                a.dropdown-toggle(href='/', data-toggle='dropdown') Dropdown <b class="caret"></b>                
                ul.dropdown-menu                                                                                  
                    li: a(href='/') Action                                                                        
                    li: a(href='/') Another action
                    li: a(href='/') Something else here
4

1 回答 1

1

我刚刚发现了问题。我使用的是BS3 RC1。我下载了RC2，问题解决了。该.collapse课程在移动设备上隐藏并在桌面上显示。原因是@mediaBS3 RC1 CSS 中缺少一条规则（在检查元素时至少从 DevTools 中缺少.collapse）：

@media (min-width: 768px) .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}

所以它适用于 Bootstrap 3 RC2。

于 2013-08-16T06:50:45.957 回答