如何实现Bootstrap Nav叠加效果

Question

我有一个Bootstrap导航栏 - 工作正常

唯一的问题是我无法在移动屏幕上的NAV菜单上实现叠加

我正在使用Bootstrap和umbraco 7

<nav class="navbar navbar-fixed-top navbar-default" role="navigation">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

            @foreach (var item in selection)
            {
                <span class="icon-bar" style="background-color: @item.GetPropertyValue("navLinkColor")"></span>
            }

        </button>

        @Html.Partial("Shared/Logo")

    </div>

    <div class="navbar-collapse collapse">

        @Html.Partial("Shared/MainNav")

        @Html.Partial("Shared/Links")

    </div>
</nav>

上面的代码在完整的桌面屏幕上运行正常 - 但是如何实现折叠叠加效果，如附加的图像？

Answer 1

您需要使用移动菜单最大宽度的@media查询和桌面视图的最小宽度。

https://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints

fac n = if n < 2 then 1 else n * fac (n-1)

main = do

    putStrLn "Enter a number: "  
    number <- getLine 
    print $ number >>= fac

或者你可以使用Sass：

 // Extra small devices (portrait phones, less than 576px)
    // No media query since this is the default in Bootstrap

    // Small devices (landscape phones, 576px and up)
    @media (min-width: 576px) { ... }

    // Medium devices (tablets, 768px and up)
    @media (min-width: 768px) { ... }

    // Large devices (desktops, 992px and up)
    @media (min-width: 992px) { ... }

    // Extra large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) { ... }