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

Question

我使用bootstrap创建了navbar和carousel（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冲突。