我一直在咒骂,谷歌搜索,比较代码,并且在我的" hamburger-mobile-menu"中的项目下拉列表中羞辱了一点。在我的页面上的所有其他内容背后..
我一直在调整不同级别和结构的z指数的不同变化,但我还没有找到任何解决方案..
希望在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> 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;
}
}
答案 0 :(得分:0)
我不建议在样式表中使用!important
声明。为什么不创建一个新类并将所有自定义属性应用于HTML中的此元素?