Make Bootstrap 3折叠菜单覆盖页面 [英] Make Bootstrap 3 collapsed menu overlay page

问题描述

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

I was wondering if it's possible to make a Bootstrap collapsed menu show over the page rather than pushing the page downward? I tried giving a z-index on the menu but with that, I had to make the menu use absolute positioning...bad idea. I want to stick with the route Bootstrap takes, but just make the menu overlay instead of push. Any ideas? Has anyone achieved this?

谢谢

推荐答案

这就是我覆盖折叠菜单。我写这个来覆盖Bootstrap：

This is how I overlaid the collapsed menu. I wrote this to override 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;
        }
    }

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

I used the media queries because I only wanted to affect the menu in the mobile view.

类 .collapsing 是为了确保覆盖页面（z -index），在屏幕上伸展（大概是手机），距离顶部50px（ navbar 类有一个 min-height：50px ）。

The class .collapsing is to make sure you are overlaying the page (z-index), stretching across the screen (presumably a phone) and are 50px from the top (the navbar class has a min-height: 50px).

类 .collapse.in 实现与上述相同，但是一旦菜单已经掉线。

The class .collapse.in is achieving the same as above, but for once the menu has already dropped.

.navbar-collapse 下的内容是摆脱最大值引导程序给下拉的高度。我有一个很长的菜单，所以可能不需要其他人。

What's under .navbar-collapse is to get rid of the max-height that bootstrap gives to dropdowns. I had a long menu so it may not be of need to others.

这篇关于Make Bootstrap 3折叠菜单覆盖页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！