如何导航栏引导 css 中的所有元素？

Question

我想要导航栏 Bootstrap 4 在所有元素上，现在可以在所有元素上使用 Carousel in Body navbar-collapse

导航栏 - HTML

<nav class="navbar navbar-expand-md navbar-dark bg-main">
        <a class="navbar-brand d-md-none order-1" style="font-size:26px;line-height:0" href="#">【K】【S】【J】</a>
        <button class="navbar-toggler" type="button">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse d-flex flex-column flex-row flex-lg-row flex-xl-row justify-content-lg-end bg-main p-3 p-lg-0 mt-5 mt-lg-0 mobileMenu" id="navbarSupportedContent">
            <ul class="navbar-nav d-flex  d-flex justify-content-around text-right px-3" dir="rtl">
                <li class="nav-item active" style="">
                    <a class="nav-link" href="#">
                        <span>Home</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <span>Anout</span>
                    </a>
                </li>
            </ul>
        </div>
    </nav>

导航栏 - CSS

    /* Mobile Menu */

@media only screen and (max-width: 992px) {
    .mobileMenu {
        position: fixed;
        top: 70px;
        bottom: 0;
        right: -100rem;
        margin: auto;
        transform: translateX(-100);
        transition: all ease .25s;
    }

    .open-nav {
        right:0;
    }

    .body-blur{
        filter: blur(5px)
    }
}

轮播 - HTML

<div id="mainCarousel" class="carousel slide" data-ride="carousel">
    <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
        <li data-target="#demo" data-slide-to="3"></li>
    </ul>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="~/Content/documents/shared/dev1.jpg" alt="Los Angeles">
            <div class="carousel-caption">
                <h3>Los Angeles</h3>
                <p>We had such a great time in LA!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="~/Content/documents/shared/dev2.jpg" alt="Chicago">
            <div class="carousel-caption">
                <h3>Chicago</h3>
                <p>Thank you, Chicago!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="~/Content/documents/shared/dev7.jpg" alt="New York">
            <div class="carousel-caption">
                <h3>New York</h3>
                <p>We love the Big Apple!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="~/Content/documents/shared/dev6.jpg" alt="New York">
            <div class="carousel-caption">
                <h3>New York</h3>
                <p>We love the Big Apple!</p>
            </div>
        </div>
    </div>
    @*<a class="carousel-control-prev shadow-lg" href="#mainCarousel" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next shadow-lg" href="#mainCarousel" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>*@
</div>

轮播 - CSS

.carousel-inner img {
        width: 100%;
        height: 600px;
    }

打开导航

$('.navbar-toggler').on('click',function () {
    $('.mobileMenu').toggleClass('open-nav');
    $('.app-content').toggleClass('body-blur');
});

Use Bootstrap 4, ASP.NET MVC5

Open Nav 和 Close Nav

When Remove Carousel code nav bar work and open success

Remove Carousel

如果使用任何 div 没有问题并且可以工作，但是当使用 Carousel nav 隐藏在 Carousel 后面时。

**感谢所有建议**

Answer 1

试一试：

.mobileMenu {
  z-index: 9999999;
}

如何导航栏引导 css 中的所有元素？

How to navbar boostrap over all elment in css?

html

css

twitter-bootstrap

bootstrap-4

jquery-mobile-navbar