-3
我遇到了boostrap导航栏切换问题,现在一直在努力解决这个问题。首先,当缩小窗口大小时,我的标志隐藏在下方,如this。看起来容器太高了,但是如果我减少容量,其他内容就会受到影响。接下来,当我减小窗口大小时,导航链接也会发生同样的情况,它们会在推送像this这样的旋转木马照片的徽标下方出现。在这一点上,我希望导航链接隐藏和切换按钮显示。 最后,移动视图的导航只显示透明背景和不必要的顶部填充,如第一个屏幕截图所示。Bootstrap导航栏切换不正常,在移动视图中隐藏下面的徽标
相关HTML:
<div class="navbar navbar-default" data-spy = "affix" data-offset-top = "200" role="navigation">
<div class="container">
<div class="navbar-header">
<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="index-en"><img class = "logo" src = "logo.png" alt = ""></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a class = "active" href="#">Home</a></li>
<li><a href="about">About us</a></li>
<li><a href="employees">Employees</a></li>
<li><a href="where">Where we are</a></li>
</ul>
</div>
</div>
</div>
CSS:
.container{
min-height: 100%!important;
margin: 0 auto!important;
padding: 0 0 0px!important;
}
.navbar-default .navbar-nav > li > a {
color: #4E4F51!important;
text-transform: uppercase!important;
font-family: 'Raleway', sans-serif!important;
font-size: 16px;
text-decoration: none;
margin: 0px 10px;
padding: 10px 10px;
position: relative;
z-index: 0;
cursor: pointer;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #3BB34A!important;
background-color: transparent!important;
}
.navbar-header {
overflow:hidden!important;
}
.logo{
max-height:100%;
}
.navbar-brand {
padding: 0px!important;
height: 140px!important;
}
.navbar-brand>img {
padding: 15px!important;
width: auto!important;
}
.navbar-toggle {
padding: px!important;
margin: 25px 15px 25px 0!important;
}
.navbar {
margin-bottom: 0!important;
}
.navbar-default {
z-index:9999!important;
}
.navbar-default .navbar-nav {
padding-top:50px;
}
.affix{
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
opacity: 0.9;
max-height:140px;
}
.affix-top {
-webkit-transition:padding 1.5s ease-in-out;
-moz-transition:padding 1.5s ease-in-out;
-o-transition:padding 1.5s ease-in-out;
transition:padding 1.5s ease-in-out;
max-height:140px;
}
我将不胜感激,就如何解决这一些建议。 刚刚添加了具有固定高度的新div,但它不起作用,徽标停留在它的位置,但切换按钮未显示。