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下的内容是摆脱引导程序给下拉列表的最大高度。我有一个很长的菜单，所以可能不需要其他人。

Make Bootstrap 3折叠菜单覆盖页面

1 个答案: