Question

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

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

我应该怎样做才能在大屏幕上显示，在移动设备上隐藏？

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

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

Answer 1

我刚刚发现了这个问题。我当时正在使用BS3 RC1。我下载了RC2，问题解决了。 .collapse类隐藏在移动设备上并显示在桌面上。原因是BS3 RC1 CSS中缺少@media规则（在检查.collapse元素时至少缺少DevTools）：

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

所以它适用于Bootstrap 3 RC2。

如何设置Bootstrap 3导航的初始状态（折叠与否）

1 个答案: