轮播控件与小屏幕中的导航栏选项重叠，使导航栏无法访问

Question

我正在使用 bootstrap (v3.3.5) 创建导航栏和轮播

我创建了 JSFiddle (https://jsfiddle.net/x6ktq8oc/3/)，但那里的代码似乎工作正常。但是在 chrome 和 IE9 上，导航栏与轮播控件重叠，这使得访问页面上的链接变得不可能，因为它一直重定向到轮播中的图像。

然后我添加css如下：

.carousel-control.left
{
margin-top:auto;
margin-bottom:auto;
max-height:80%;
}
.carousel-control.right 
{
margin-top:auto;
margin-bottom:auto;
max-height:80%;
}

现在我可以在较大的屏幕上正确访问链接，但在较短的屏幕上，展开图标栏（汉堡图标）后，轮播控件仍保留在导航栏而不是图像周围（滑块）。

如何将轮播控件从导航栏转移到轮播旁边？

这里附上截图

Answer 1

你搞砸了 z-index 吗？ bootstrap.min.css 中已经有一个 z-index...

.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right                 {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    display: inline-block;
}

试试……

.carousel-control{
    z-index:4 !important;
}
.navbar-collapse {
    z-index:6 !important;
}

这可能并不完全正确，但值得摆弄。如果不起作用，请尝试将 !important 添加到 css，并确保 z-index 位置不会与站点上的其他 z-indexing 冲突。