html - 旋转木马控件与小屏幕中的导航栏选项重叠，导致无法访问导航栏

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%;
}

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

如何从导航栏移动轮播控件旁边的轮播控件？

附上截图

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 冲突。