Question

我想做的是，像图1中的阴影一样放在图片2中。箭头表示阴影应显示的位置。但是我找不到任何代码片段来在导航栏下面放置一个阴影，当显示下拉菜单时。也许你可以帮助我。

第一张图片：http://abload.de/image.php?img=arrowbkkd5.png 第二张图片：http://abload.de/image.php?img=arrow2lsjum.png

Answer 1

你可以在导航栏下添加一个div并给它一个margin-top -x px，如下所示：

    .gradient{
         background: #6393c1; /* Old browsers */
         background: -moz-linear-gradient(top,  #6393c1 1%, #cfe7fa 100%); /* FF3.6+ */
         background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#6393c1), color-stop(100%,#cfe7fa)); /* Chrome,Safari4+ */
         background: -webkit-linear-gradient(top,  #6393c1 1%,#cfe7fa 100%); /* Chrome10+,Safari5.1+ */
         background: -o-linear-gradient(top,  #6393c1 1%,#cfe7fa 100%); /* Opera 11.10+ */
         background: -ms-linear-gradient(top,  #6393c1 1%,#cfe7fa 100%); /* IE10+ */
         background: linear-gradient(to bottom,  #6393c1 1%,#cfe7fa 100%); /* W3C */
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6393c1', endColorstr='#cfe7fa',GradientType=0 ); /* IE6-9 */
         height:20px;
         margin-top:-20px;
     }

Fiddle ，您可以使用名为CSS Gradient Generator的工具制作渐变。然后定义您的高度并将其与导航栏对齐。希望这对你有所帮助，如果没有，请自由地问。

编辑，关闭以前的代码

我为你做了一个bootply。你可以找到它here。基本上我所做的是在导航栏下面添加渐变。给它一个等于导航栏高度的margin-top。然后覆盖bootstrap类下拉菜单，如下面，margin-top等于渐变的高度。我希望这就是你所需要的。

.navbar-nav>li>.dropdown-menu{
    margin-top:20px !important;
}

编辑2：

好的，我想我现在已经明白了。看看here。如果您不需要桌面设备上的渐变，则可以使用display none隐藏它，然后添加媒体查询显示块。但这取决于你。

    @media screen and (max-width: 768px) {
    .navbar-collapse{
        position:absolute;
        background:#222;
        width:100%;
        top:70px;
    }
}

Bootstrap Shadow下拉菜单

1 个答案:

编辑，关闭以前的代码

编辑2：