引导阴影未显示在 nav.shadow 上

Posted 2023-02-22

【中文标题】引导阴影未显示在 nav.shadow 上

【英文标题】：Bootstrap shadow not displaying on nav.shadow

【发布时间】：2020-03-18 04:54:27

【问题描述】：

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

我已经构建了导航栏组件并添加了我想要的样式，但是当我添加阴影或 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;

如何让阴影正确显示？

【问题讨论】：

当您在开发人员工具中检查相关元素时，是否应用了适当的阴影 CSS？如果是这样，请尝试向该元素添加margin: 10px，作为测试。可能是 overflow: hidden 在祖先上剪裁了阴影，如果它存在，边距将允许您看到阴影。

【参考方案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>

【讨论】：

感谢您的帮助。根据需要排序，也给了我一个想法。

@SnipsYT 太好了。这是我的荣幸。 :)