html - Bootstrap 阴影未显示在 nav.shadow 上

Question

我有一个用 vue.js 制作的导航栏组件。我正在使用 bootstrap 对应用程序进行样式设置，因此我在主 html 文件中包含了 bootstrap。

我已经构建了导航栏组件并添加了我想要的样式，但是当我添加 shadow 或 shadow-lg 类时，阴影根本没有出现。我已经尝试增加导航栏的 z-index，但阴影仍然没有显示。

<template>
<div class="row">
    <div class="col">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-rounded shadow-lg" style="z-index: 100;">
            <a class="navbar-brand" href="/">{{ logo_text }}</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">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item" 
                        v-for="(item, index) in links"
                        :key="index"
                    >
                        <a :href="item.href" class="nav-link">{{ item.text }}</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>
</template>

请注意，类 navbar-rounded 是我用样式添加的自定义类

.navbar-rounded {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

如何让阴影正确显示？

Answer 1

阴影已正确应用。应用样式没有问题。

我创建了一个 JSFiddle ，我将 navbar 转换为更轻的版本。在那里你可以看到应用了阴影。原因是由于应用了深色主题，您看不到 navbar 背景颜色和它的阴影颜色之间的颜色分离。

通过在 nav 元素上应用 shadow、shadow-sm 和 shadow-lg 类来澄清这个问题。

希望这有助于解决您的问题。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>


<div class="row">
    <div class="col">
        <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-rounded shadow" style="z-index: 100;">
            <a class="navbar-brand" href="/">{{ logo_text }}</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">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item" 
                        v-for="(item, index) in links"
                        :key="index"
                    >
                        <a :href="item.href" class="nav-link">{{ item.text }}</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>