0
我在navbar-fixed-top
上的Bootstrap折叠菜单上出现滚动问题,当它折叠时,菜单不垂直滚动,但页面开始滚动。 一切工作正常,当我设置navbar-static-top
,但我真的需要坚持导航栏顶部。 任何帮助都非常明显。由于 请下面这段代码检查它,你也可以检查BootplyBootstrap崩溃的菜单滚动问题
.navbar-brand { position: relative; z-index: 2; }
.navbar-nav.navbar-right .btn { position: relative; z-index: 2; padding: 4px 20px; margin: 10px auto; transition: transform 0.3s; }
.navbar .navbar-collapse { position: relative; overflow: hidden !important; }
.navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 22px; }
.navbar .nav-collapse { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding-right: 120px; padding-left: 80px; width: 100%; }
.navbar.navbar-default .nav-collapse { background-color: #f8f8f8; }
.navbar.navbar-inverse .nav-collapse { background-color: #222; }
.navbar .nav-collapse .navbar-form { border-width: 0; box-shadow: none; }
.nav-collapse>li { float: right; }
.btn.btn-circle { border-radius: 50px; }
.btn.btn-outline { background-color: transparent; }
.navbar-nav.navbar-right .btn:not(.collapsed) {
background-color: rgb(111, 84, 153);
border-color: rgb(111, 84, 153);
color: rgb(255, 255, 255);
}
.navbar.navbar-default .nav-collapse,
.navbar.navbar-inverse .nav-collapse {
height: auto !important;
transition: transform 0.3s;
transform: translate(0px,-50px);
}
.navbar.navbar-default .nav-collapse.in,
.navbar.navbar-inverse .nav-collapse.in {
transform: translate(0px,0px);
}
#Searchbox{width:500px;}
@media screen and (max-width: 767px) {
.navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 15px; padding-right: 15px; }
.navbar .nav-collapse { margin: 7.5px auto; padding: 0; }
.navbar .nav-collapse .navbar-form { margin: 0; }
.nav-collapse>li { float: none; }
.navbar.navbar-default .nav-collapse,
.navbar.navbar-inverse .nav-collapse {
transform: translate(-100%,0px);
}
.navbar.navbar-default .nav-collapse.in,
.navbar.navbar-inverse .nav-collapse.in {
transform: translate(0px,0px);
}
.navbar.navbar-default .nav-collapse.slide-down,
.navbar.navbar-inverse .nav-collapse.slide-down {
transform: translate(0px,-100%);
}
.navbar.navbar-default .nav-collapse.in.slide-down,
.navbar.navbar-inverse .nav-collapse.in.slide-down {
transform: translate(0px,0px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-3">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-3">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown "><a href="#" id="drop1" data-toggle="dropdown" class="dropdown-toggle" role="button">Music <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu" aria-labelledby="drop1">
<li role="presentation"><a href="#" role="menuitem">Grones</a></li>
<li role="presentation"><a href="#" role="menuitem">Nach</a></li>
<li role="presentation"><a href="#" role="menuitem">Zpu</a></li>
<li role="presentation"><a href="#" role="menuitem">Madnass</a></li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li>
<a class="btn btn-default collapsed" data-toggle="collapse" href="#nav-collapse3" aria-expanded="false" aria-controls="nav-collapse3">Search</a>
</li>
</ul>
<div class="collapse nav navbar-nav nav-collapse slide-down" id="nav-collapse3">
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</form>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav><!-- /.navbar -->
<div class="container body-content" style="margin-top:60px;">
<div class="row" style="padding:10px;">
asdfasdf<br>
asdfas
df<br>
sadf<br>
asdf<br>
a<br>
sdf<br>
sad<br>
f<br>
sadf<br>
as<br>
df<br>
sadf<br>
sa<br>
df<br>
</div>
</div>
万分感谢的人,你是一个生命的救星,我几乎打破我的头。太糟糕了我不是一个CSS家伙。再次感谢 –
没问题,很高兴我可以帮忙! – vanburen