白色背景的 Div 隐藏了 Bootstrap 导航栏阴影

Posted 2023-03-05

技术标签:

【中文标题】白色背景的 Div 隐藏了 Bootstrap 导航栏阴影【英文标题】：Div with white background is hiding the Bootstrap navbar shadow 【发布时间】：2020-06-21 14:04:41 【问题描述】：

我正在使用带有.shadow-sm 的 Bootstrap 导航栏。我在它下面有两个 div，一个没有背景，另一个有白色背景。

阴影在没有设置背景的 div 中正常显示，但被白色背景隐藏。

<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <a class="nav-brand" href=" url('/') ">
                    Home
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label=" __('Toggle navigation') ">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav mr-auto">

                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ml-auto">
                        <!-- Authentication Links -->
                        <li class="nav-item pr-md-4">
                            <a class="nav-link" href="#">Platform</a>
                        </li>
                        <li class="nav-item pr-md-4">
                            <a class="nav-link" href="#">Settings</a>
                        </li>

                        <div class="navbar-text border-left d-sm-none d-md-block pl-md-3"></div>
                    </ul>
                </div>
            </div>
        </nav>

        <main class="pb-4">
            <div class="container-fluid">

        <div class="row">

        <div class="col-md-3 left-panel pt-5 pr-4 d-none d-md-block text-right">
            Left menu
        </div>

        <div class="col-12 col-md-9 pt-5 px-4 center-panel">
            <div class="h1">
                Dashboard
            </div>
            <div class="row">
                <div class="col-12 col-md-6">
                    Welcome back!
                </div>
            </div>
        </div>

    </div>

</div>
        </main>
    </div>
</body>

html, body 
    font-family: $font-family-sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    font-weight: normal;
    color: $textBlack;
    background: linear-gradient(180deg, #E9EDF3 0%, rgba(255, 255, 255, 0) 100%);
    min-height: 100%;
    margin: 0;


.left-panel 
    min-height: 100vh;


.center-panel 
    min-height: 100vh;
    background-color: white;


.content-panel 
    min-height: 100vh;


.right-panel 
    min-height: 100vh;
    background-color: white;

谁能看到我在这里做错了什么？我尝试添加和删除填充和边距，但似乎白色背景覆盖了阴影。

这两个面板颜色不同，所以我不能只去掉背景而使用正文背景。

【问题讨论】：

【参考方案1】：

这是由于元素的堆栈顺序而发生的。白色背景的元素位于导航栏的前面。

只需将导航栏元素放在前面加上z-index即可解决：