javascript - 制作 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;
        }
    }

我使用媒体查询是因为我只想影响移动 View 中的菜单。

类 .collapsing 是为了确保你覆盖页面(z-index)，在屏幕上拉伸(stretch)(大概是手机)并且距离顶部 50px(navbar 类有一个 min-height: 50px)。

.collapse.in 类实现了与上面相同的功能，但是这一次菜单已经放下。

.navbar-collapse 下的内容是摆脱 bootstrap 给下拉菜单的最大高度。我的菜单很长，所以其他人可能不需要。