bxslider next / back按钮出现在bootstrap导航菜单中

Question

我正在为足球队开发一个网络应用程序。我使用带有Bootstrap 3.0.3和jQuery的HTML5 + CSS。

首先，在顶部显示一个菜单，一切正常。

所以我决定去新闻部分添加jQuery bxslider插件。

问题在于，当单击菜单并显示下拉列表时，bxslider按钮仍然可见，这看起来非常令人不安和无用。

如何在显示菜单时禁用这两个按钮？一个正确的解决方案是创建一个jQuery事件，它会暂时隐藏滑块还是有一个我忽略的CSS技巧？

演示：here

解决方案，问题：320 x 568（小型设备）

默认index.html：

点击菜单后

Answer 1

要解决此问题，请更改箭头的z-index，如下所示：

.bx-wrapper .bx-controls-direction a{z-index:100};

Answer 2

将.navbar-fixed-top提供给z-index:99999;会在菜单打开时显示箭头。

.navbar-fixed-top{
   z-index:99999;
}

Answer 3

默认情况下，带有固定顶部的导航栏的z-index为1030，如下面的代码所示

.navbar-fixed-top, .navbar-fixed-bottom {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
}

和轮播箭头有z-index 9999;

.bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    outline: 0;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    z-index: 9999;
}

现在您只需要为导航栏增加 z-index＆gt; 9999 ，方法是添加一些自定义样式来覆盖导航栏的默认z-index。 例如

.navbar-fixed-top{
    z-index: 10001;
}