Make Bootstrap 3折叠菜单覆盖页面

Question

我想知道是否可以在页面上显示Bootstrap折叠菜单而不是向下推页面？我尝试在菜单上给出一个z-index但是,我不得不让菜单使用绝对定位......糟糕的主意.我想坚持使用Bootstrap的路线,但只需将菜单覆盖而不是按下.有任何想法吗？有没有人实现过这个？

谢谢

Answer 1

这就是我覆盖折叠菜单的方式.我写这个来覆盖Bootstrap:

 @media screen and (max-width: 768px)
    {
        .collapsing
        {
            position: absolute !important;
            z-index: 20;
            width: 100%;
            top: 50px;
        }
        .collapse.in {
            display: block;
            position: absolute;
            z-index: 20;
            width: 100%;
            top: 50px;
        }
        .navbar-collapse
        {
            max-height: none !important;
        }
    }

我使用了媒体查询,因为我只想影响移动视图中的菜单.

这个类.collapsing是为了确保你覆盖页面(z-index),在屏幕上伸展(可能是一部电话)并且距离顶部50px(navbar该类有一个min-height: 50px).

该课程.collapse.in实现与上述相同,但一旦菜单已经下降.

什么.navbar-collapse是摆脱bootstrap给下拉的最大高度.我有一个很长的菜单,所以它可能不需要其他人.