javascript - 单击带有轮播的切换按钮后，Bootstrap navbar-collapse 消失

Question

我有一个简单的 Bootstrap 导航栏。在此之后，我在网站的标题中有 Bootstrap 轮播，然后它们在 lg 和 md 屏幕上运行良好......但是在 sm 和 xs 屏幕上，当我单击按钮时，navbar-collapse 出现大约 1 秒然后它消失了......我认为这个问题是因为标题中的轮播但我不知道如何解决这个问题..我需要有人告诉我解决方案

<nav class="navbar navbar-default">
                <div class="container">
                    <!-- Brand and toggle -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#"><h3>Bondok <span>BE</span></h3></a>
                    </div><!-- navbar-header -->

                    <!-- links -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#">Home &nbsp;<i class="fa fa-home fa-lg"></i></a></li>
                            <li><a href="#">About &nbsp;<i class="fa fa-user fa-lg"></i></a></li>
                            <li><a href="#">Resume &nbsp;<i class="fa fa-file-text fa-lg"></i></a></li>
                            <li><a href="#">Portfolio &nbsp;<i class="fa fa-photo fa-lg"></i></a></li>
                            <li><a href="#">Contact &nbsp;<i class="fa fa-envelope fa-lg"></i></a></li>
                        </ul>
                 </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid --> 

style.scss 是:

.navbar {
    @include border_r(0);
    margin: 0;
    background-color: $white_color;
    border: none;
    height: 60px;
    .navbar-header .navbar-toggle {
        background-color: $main_color;
        span {
            background-color: $white_color;
        }
    }
    .navbar-brand {
        border-top: 3px solid $main_color;
        h3 {
            @include font_spec(24px, bold);
            margin-top: 0;
            span {
                color: $main_color;
                font-size: 28px;
            }
        }
    }
    .navbar-collapse {
        z-index: 9999;
        background-color: #fff;
    }

}

Answer 1

只需使用:

.navbar-default{
  z-index: 1030;
}

.wrapper .navbar .navbar-collapse 中不需要 z-index

这是工作笔 http://codepen.io/anon/pen/wzqBok