Bootstrap“汉堡包”移动菜单z-index问题

Question

我一直在发誓，在谷歌上搜索，比较代码，并且在我的“hamburger-mobile-menu”中的项目下拉列表位于我页面上所有其他内容之后的情况下更发誓..

我一直在调整不同级别和结构的 z-index 的不同变体，但我还没有找到任何解决方案..

希望在 bootstrap CSS 方面比我有更多技能的人能弄清楚这有什么问题..

HTML

<div class="navbar-default navbar-fixed-top with-bg" role="navigation">
            <div class="container-fluid">

                <div class="navbar-header">

                    <div class="header_menu visible-xs visible-sm hidden-md hidden-lg">
                        <a href="ViewTeam.aspx?teamid=1" id="lnkPersonalMobile" style="display:block"><i style="padding-right:5px" class="glyphicon glyphicon-star-empty"></i>Mitt lag</a>
                        <a href="Forum.aspx?type=1" id="lnkCoachForumMobile" style="display:block"><i style="padding-right:5px" class="glyphicon glyphicon-star-empty gly-spin"></i>Trenerforum</a>


                        <div style="float: left">

                        </div>
                    </div>

                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <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="Default.aspx">
                        <div id="clublogo" class="logo-placeholder" style="background-image:url(https://klubbweb.blob.core.windows.net/clubid1/ef33672c-3b2c-4ee0-856e-b86b1b4ae90flogo.png);"></div>
                    </a>

                </div>
                <div class="header_menu hidden-xs">
                    <a id="lnkAboutUs" href="/ViewAboutUs">Om GHK</a>
                    <a id="lnkTeamOverviewDesktop" href="/TeamOverview">Lagoversikt</a>
                    <a id="lnkEventCalendar" href="/EventCalendar">Eventkalender</a>
                    <a id="lnkAdminPageDesktop" href="/AdminPage">Admin</a>

                    <a href="ViewTeam.aspx?teamid=1" id="lnkPersonal" style="display:block"><i style="padding-right:5px" class="glyphicon glyphicon-star-empty"></i>Mitt lag</a>
                    <a href="Forum.aspx?type=1" id="lnkCoachForum" style="display:block"><i class="glyphicon glyphicon-star-empty gly-spin"></i>&nbsp;Trenerforum</a>


                    <div style="float: left">

                    </div>

                </div>

                <div class="collapse navbar-collapse">


                    <ul class="nav navbar-nav navbar-right">
                        <li class="active">
                            <!--<a href="#" class="hidden-xs">Home</a>-->
                            <a id="lnkTeamOverview" class="visible-sm" href="/TeamOverview">Lag</a>
                        </li>
                        <li class="active">
                            <a id="lnkAdminPage" class="visible-sm" href="/AdminPage">Administrasjon</a>
                        </li>
                        <li class="active">
                            <a id="lnkTeamOverviewMobile" class="visible-sm" href="/EventCalendar">Eventkalender</a>
                        </li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>

被覆盖的引导样式

.navbar-default {


 background-image: url('Images/header-bg.png');
  background-position: top left;
  background-repeat: no-repeat;
  background-color: #333;
  border-color: #732181;
  height: 130px;
  border-bottom: 4px solid #7b9cc6;
}
.navbar-default .navbar-brand {
  color: #ffffff;
    padding-left: 0;
}

.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
  color: #ffffff;
}
.navbar-default .navbar-text {
  color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
    z-index: 888888!important;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  color: #000;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  color: #ffffff;
  background-color: #00468e;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
  color: #ffffff;
  background-color: #00468e;
}
.navbar-default .navbar-toggle {
  border-color: #00468e;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background-color: #00468e;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #ffffff;
    z-index: 99999999;
}
.navbar-default .navbar-link {
  color: #ffffff;
}
.navbar-default .navbar-link:hover {
  color: #ffffff;
}

input[type="checkbox"] {
    height: 20px;
    width: 20px;
    line-height: 0.1em!important;
}

.checkbox-label {
    line-height: 2em;
}

@media (max-width: 767px) {

.navbar-default {
  background-color: #333;
  border-color: #00468e;
  height: 64px;
  border-bottom: 4px solid #00468e;
}
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffffff;
    background-color: #00468e;
  }

  .navbar-default .navbar-header {
      padding-left: 15px;
  }

  .with-bg {

  }

  .logo-placeholder {
      height: 55px!important;
      width: 55px!important;
      background-size: 100% 100%;
      margin-top: -10px;
      margin-left: -10px;
  }

  .navbar-default .navbar-brand img {
    width: 101px;
    height: 27px;
}

}

Answer 1

我不建议在您的样式表中使用!important 声明。为什么不只创建一个新类并将所有自定义属性应用于 HTML 中的此元素？