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

Question

我正在使用 Bootstrap 的导航栏和.shadow-sm 。 我在它下面有两个 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;
}

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

两个面板颜色不同，所以我不能只删除背景并使用主体背景。

Answer 1

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

您可以通过将 navbar 元素放置在z-index的前面来解决它：

nav {
  z-index: 1;
}

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-03-09 16:31:25

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-03-09 16:31:25

解决方案1
2 已采纳 2020-03-09 16:31:25