如何实现 Bootstrap Nav 叠加效果答案

【问题标题】：How to implement a Bootstrap Nav overlay effect如何实现 Bootstrap Nav 叠加效果
【发布时间】：2017-09-18 09:43:55
【问题描述】：

我有一个 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>

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

【问题讨论】：

标签： javascript css html umbraco bootstrap-4

【解决方案1】：

您将希望使用@media 查询，移动菜单的最大宽度和桌面视图的最小宽度。

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

 // 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) { ... }

或者你可以使用 Sass：

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

【讨论】：