Question

我有一个简单的bootstrap导航栏。在此之后我在网站的标题中有自举旋转木马，然后它们在lg和md屏幕上运行良好...但是在我点击按钮时在sm和xs屏幕中导航栏崩溃显示约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

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

1 个答案: