我很难将导航切换到移动设备上工作。出现"切换"按钮，当我单击它时，我的"社交"下拉菜单出现在切换按钮的左侧。它也不显示我的其他导航链接。
您可以在codepen上找到我的代码：https：//codepen.io/jeremycollins/pen/vwvwme
这是代码。我正在使用Bootstrap 3.3.7：
body {
background-color: #222222;
color: #fff;
font-family: 'Overclock' arial;
}
#bio {
color: #fff;
margin-top: 50px;
font-weight: 400;
padding-left: 30px;
}
#jeremy {
margin-left: 100px;
font-weight: 900;
}
.jumbotron {background-color: #222222;}
.profile {
border-radius: 50%;
float: right;
}
.navbar-brand {font-weight: 900;
}
#tagline {font-weight: 700;}
.thumbnails {
}
span {
display: inline-block;
vertical-align: middle;
}
.outer-line {
width: 20%;
border-bottom: 3px solid white;
margin-top: 16px;
}
.spacer {margin-top: 100px;}
button {color: #fff;}
.btn {background-color: #222222;}
.btn:hover {color: grey;}
#footercopy {margin-top: 16px;}
.icon-bar {
color: white;
}
.navbar {
height:50px;
}
.nav.navbar-left{
bottom: 0;
left: 0;
position:absolute;
}
.nav.navbar-right{
bottom: 0;
right: 100px;
position:absolute;
}
.dropdown-menu {
background-color: #222222;
}
.dropdown-menu>li>a {
color:#fff;
}<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- 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="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Jeremy Collins</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Social Links <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="https://facebook.com/jeremyscottcollins" target="_blank">Facebook</a></li>
<li><a href="https://twitter.com/jeremycollins92" target="_blank">Twitter</a></li>
<li><a href="https://www.linkedin.com/in/jeremycollins92/" target="_blank">LinkedIn</a></li>
<li role="separator" class="divider"></li>
<li><a href="https://github.com/jeremycollins" target="_blank">GitHub</a></li>
<li><a href="http://beta.freecodecamp.com/en/jeremycollins" target="_blank">freeCodeCamp</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="spacer"></div>
<div class="jumbotron">
<div class="col-md-8">
<a name="home"></a>
<h1>Hello, </h1>
<h1 id="jeremy">I'm Jeremy!</h1>
<p id="bio">Full Stack Developer, System Administrator, & Entrepreneur</p>
</div>
<div class="col-md-4">
<img class="img-responsive profile" src="https://avatars1.githubusercontent.com/u/20449608?v=3&u=3028ad3dd7f5185b62b69ba4ad957e5ae7cacacf&s=400" alt="Jeremy Collins">
</div>
</div>
<div class="container">
<div class="col-md-12">
<div class="text-center">
<div class="spacer"></div>
<span class="outer-line"></span>
<span aria-hidden="true" style="margin:10px 0">
<h1>{ Portfolio }</h1>
<a name="portfolio"></a>
</span>
<span class="outer-line"></span>
</div>
</div>
</div>
<div class="container">
<div class="col-md-6">
<div class="text-center">
<p><img class="center-block img-responsive" src="http://placehold.it/400x150/000000/FFFFFF&text=Project+1!"></img></p>
<p><img class="center-block img-responsive" src="http://placehold.it/400x150/000000/FFFFFF&text=Project+3!"></img></p>
<p><img class="center-block img-responsive" src="http://placehold.it/400x150/000000/FFFFFF&text=Project+5!"></img></p>
</div>
</div>
<div class="col-md-6">
<div class="text-center">
<p><img class="center-block img-responsive" src="http://placehold.it/400x150/000000/FFFFFF&text=Project+2!"></img></p>
<p><img class="center-block img-responsive" src="http://placehold.it/400x150/000000/FFFFFF&text=Project+4!"></img></p>
<p><img class="center-block img-responsive" src="http://placehold.it/400x150/000000/FFFFFF&text=Project+6!"></img></p>
</div>
</div>
</div>
<div class="container">
<div class="col-md-12">
<div class="text-center">
<div class="spacer"></div>
<span class="outer-line"></span>
<span aria-hidden="true" style="margin:10px 0">
<h1>{ Contact }</h1>
<a name="contact"></a>
</span>
<span class="outer-line"></span>
</div>
</div>
</div>
<div class="container">
<div class="col-md-12">
<form>
<div class="form-group">
<label>Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">I'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label>Full Name</label>
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<label>Message</label>
<textarea class="form-control" placeholder="Enter your message..."></textarea>
<button type="submit" class="btn btn-inverse btn-block"><i class="fa fa-envelope"></i> Submit</button>
</form>
</div>
</div>
</div>
</div>
<div class="fluid-width">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<h4 class="text-center" id="footercopy">© 2017 Jeremy Collins</h4>
</div>
</nav>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script> <head>中的bootstrap链接是否正确检查您是否有此链接：这是JS
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>