Bootstrap 3：如何获取屏幕下的其他折叠导航栏链接？

Question

我有一个包含许多链接/选项的导航栏：

当我折叠它时，一些选项完全不在屏幕上，我无法点击它们：

在图片中，我可以看到链接4，但不能看到链接5和链接6.

使用下拉菜单会做同样的事情。

＆＃13;

＆＃13;

.navbar {
	border: 0;
	border-bottom: 1px solid #FFF;
	background-color: #111 !important;
	border-radius: 0px;
}


/* Adjust Toggle button */

.navbar-toggle {
	margin-top: 18px;
}


/* Adjust Navbar Height */

.navbar-brand,
.navbar-nav li a {
	padding-top: 0;
}

.navbar-brand,
.navbar-nav li a {
	color: #FFF !important;
	line-height: 70px;
	height: 70px;
}

.navbar-brand {
	color: #0CF !important;
}

.navbar-brand:hover,
.navbar-nav li a:hover {
	background-color: #06C !important;
	color: #0f9 !important;
}

.dropdown-menu > li > a {
	line-height: 40px;
	height: 40px;
}

.navbar-nav .open .dropdown-toggle {
	background-color: #222 !important;
}

.navbar div ul li .dropdown-menu {
	background-color: #222;
	border-top: 2px solid #09f;
}

/* Nav Affix */
nav.affix {
    position: fixed;
    top: 0;
    width: 100%;
    z-index:10;
}
.affix + .container {
	padding-top: 90px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.

<nav class="navbar navbar-default" data-spy="affix" data-offset-top="308">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>  
				</button>
				<a class="navbar-brand" href="#">
					<i class="fa fa-adjust" aria-hidden="true"></i>
					Brand
				</a>
			</div>
			
			<div class="collapse navbar-collapse" id="myNavbar">
				<ul class="nav navbar-nav navbar-left">
					<li><a href="#">Storyline</a></li>
					<li><a href="#">Characters</a></li>
					<li><a href="#">Gallery</a></li>
					<!--li class="dropdown">
						<a class="dropdown-toggle" data-toggle="dropdown" href="#">Misc<span class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a href="#">About</a></li>
							<li><a href="#">Contact</a></li>
							<li><a href="#">Other</a></li>
						</ul>
					</li-->
					<li><a href="#">Link 1</a></li>
					<li><a href="#">Link 2</a></li>
					<li><a href="#">Link 3</a></li>
					<li><a href="#">Link 4</a></li>
					<li><a href="#">Link 5</a></li>
					<li><a href="#">Link 6</a></li>
				</ul>
			</div>
		</div>
	</nav>

<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.


<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你的javascript可能有问题。我看到有类.affix-top被添加到.navbar .navbar-default。删除它，您的导航将正确滚动。