请查看我的portfolio site
用于导航较小屏幕尺寸的切换汉堡按钮不起作用，即没有任何反应，点击它时链接不会显示。
展示的投资组合应用的图片和框对于较小的屏幕尺寸变得太小，即使我使用col-sm-12，为什么会发生这种情况？
我注意到对于小屏幕尺寸也有一个水平条，不应该在那里。它似乎是投资组合标题和联系我的标题导致这一点。你能告诉我如何解决这个问题吗？
<!--Navbar Begins -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- navbar header begins -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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="#">Faraz Ahmed</a>
</div>
<!-- navbar header ends -->
<!-- div collapse begins -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#aboutme">About</a>
</li>
<li><a href="#portfolioz">Portfolio</a>
</li>
<li><a href="#contactme">Contact</a>
</li>
</ul>
</div>
<!-- div collapse ends -->
</div>
<!-- container-fluid ends -->
</nav>
<!--Navbar ends -->
<div id="aboutme" class="about container-fluid">
<div class="row">
<div class="col-lg-12 col-md-8 col-sm-6">
<img class="img-responsive img-circle" src="http://res.cloudinary.com/whizzy/image/upload/v1454699647/faraz_qwdqrx.jpg">
<h1>Faraz Ahmed</h1>
<hr><i class="fa fa-star"></i>
<hr>
<p>I am a self taught web developer who has learnt html,css, Javascript,Jquery and bootstrap too. I keep building websites and other apps to practice what I have learnt. The psd to html site below and the sites with carousel and overlay are all responsive.
Go ahead and take a look at them in your mobile and see how they adjust to your screen size.</p>
</div>
</div>
</div>
<div id="portfolioz" class="portfolio container-fluid">
<div class="row">
<div class="col-md-12 col-md-10 col-sm-12">
<h1>Portfolio</h1>
<hr><i class="fa fa-star"></i>
<hr>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/YwXYbM">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/v1454696279/random-quotes_wkbzgo.jpg">
</a>
<p>This is the random quotes generator</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/PZzgvR">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1454696085/pomodoro_rnl9n4.jpg">
</a>
<p>This is the pomodoro timer</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/XXjEYE">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1454695469/javascript-calculator_zksddu.jpg">
</a>
<p>This is the javascript calculator</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/GZWNOX">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1459189426/carousel-experiment_sd0wev.jpg">
</a>
<p>Carousel Experiment with in psd to html site</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/eJqPjy">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1459189426/portfolio-site_gmac46.jpg">
</a>
<p>My Portfolio site showcasing projects & experiments</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/ZQRvKL">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1459189426/overlay-experiment_eocbsr.jpg">
</a>
<p>Experimenting with overlay and pop-up boxes</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/YwoGMB">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1462367863/weatherapp_zvihox.jpg">
</a>
<p>My Weather app</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/BKGXNG">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1462367830/wikiview_slscex.jpg">
</a>
<p>Wikipedia Viewer</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/qZLZEy">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1467313840/twitch-tv_vhqntl.jpg">
</a>
<p>Twitch Tv Streamer</p>
</div>
</div>
</div>
<div id="contactme" class="contact container-fluid">
<div class="row">
<div class="col-md-12">
<h2> Connect with me:</h2>
<a href="http://www.twitter.com/faraz">
<button id="btn5" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i>Twitter</button>
</a>
<a href="http://www.github.com/silentarrowz">
<button id="btn6" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i>Github</button>
</a>
<a href="https://www.linkedin.com/profile/view?id=AAMAAAOtZrQByiBQ7mnkxFa8BDodzVKYzsI7T3Y&trk=hp-identity-name">
<button id="btn7" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i>Linkedin</button>
</a>
<a href="http://www.freecodecamp.com/silentarrowz">
<button id="btn8" class="btn btn-default btn-lg"><i class="fa fa-fire fa-fw"></i>freeCodeCamp</button>
</a>
</div>
</div>
</div>
<div class="footer">
<p>Copyright Reserved By Faraz Ahmed @ 2016</p>
</div>
答案 0 :(得分：2)
您遗失bootstrap.js
Boostrap导航栏需要使用JavaScript插件才能正常工作，而您却错过了它。您可以在Boostrap Docs
中看到需要JavaScript插件
如果JavaScript被禁用且视口足够窄，那么 导航栏崩溃，将无法扩展导航栏和视图
中的内容.navbar-collapse。响应式导航栏需要包含collapse plugin 你的Bootstrap版本。
body{
font-size:14px;
}
.container-fluid{
max-width:1200px;
}
.hoverme{
height:400px;
margin-bottom:20px;
overflow :hidden;
max-width:340px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!--Navbar Begins -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- navbar header begins -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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="#">Faraz Ahmed</a>
</div> <!-- navbar header ends -->
<!-- div collapse begins -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#aboutme">About</a></li>
<li><a href="#portfolioz">Portfolio</a></li>
<li><a href="#contactme">Contact</a></li>
</ul>
</div><!-- div collapse ends -->
</div><!-- container-fluid ends -->
</nav>
<!--Navbar ends -->
<div id="aboutme" class="about container-fluid">
<div class="row">
<div class="col-lg-12 col-md-8 col-sm-6">
<img class="img-responsive img-circle" src="http://res.cloudinary.com/whizzy/image/upload/v1454699647/faraz_qwdqrx.jpg">
<h1>Faraz Ahmed</h1>
<hr><i class="fa fa-star"></i><hr>
<p>I am a self taught web developer who has learnt html,css, Javascript,Jquery and bootstrap too. I keep building websites and other apps to practice what I have learnt. The psd to html site below and the sites with carousel and overlay are all responsive. Go ahead and take a look at them in your mobile and see how they adjust to your screen size.</p>
</div>
</div>
</div>
<div id="portfolioz" class="portfolio container-fluid">
<div class="row">
<div class="col-md-12 col-md-10 col-sm-12">
<h1>Portfolio</h1>
<hr><i class="fa fa-star"></i><hr>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/YwXYbM"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/v1454696279/random-quotes_wkbzgo.jpg"></a>
<p> This is the random quotes generator</p></div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/PZzgvR"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1454696085/pomodoro_rnl9n4.jpg"></a>
<p> This is the pomodoro timer</p></div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"> <a class="thumbnail" href="http://codepen.io/silentarrowz/full/XXjEYE"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1454695469/javascript-calculator_zksddu.jpg"></a>
<p> This is the javascript calculator</p></div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/GZWNOX"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1459189426/carousel-experiment_sd0wev.jpg"></a>
<p>Carousel Experiment with in psd to html site</p></div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/eJqPjy"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1459189426/portfolio-site_gmac46.jpg"></a>
<p>My Portfolio site showcasing projects & experiments</p></div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/ZQRvKL"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1459189426/overlay-experiment_eocbsr.jpg"></a>
<p>Experimenting with overlay and pop-up boxes</p></div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/YwoGMB"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1462367863/weatherapp_zvihox.jpg"></a>
<p>My Weather app </p></div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/BKGXNG"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1462367830/wikiview_slscex.jpg"></a>
<p>Wikipedia Viewer</p></div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/qZLZEy"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1467313840/twitch-tv_vhqntl.jpg"></a>
<p>Twitch Tv Streamer</p></div>
</div>
</div>
<div id="contactme" class="contact container-fluid">
<div class="row">
<div class="col-md-12">
<h2> Connect with me:</h2>
<a href="http://www.twitter.com/faraz">
<button id="btn5" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i>Twitter</button>
</a>
<a href="http://www.github.com/silentarrowz">
<button id="btn6" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i>Github</button>
</a>
<a href="https://www.linkedin.com/profile/view?id=AAMAAAOtZrQByiBQ7mnkxFa8BDodzVKYzsI7T3Y&trk=hp-identity-name">
<button id="btn7" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i>Linkedin</button>
</a>
<a href="http://www.freecodecamp.com/silentarrowz">
<button id="btn8" class="btn btn-default btn-lg"><i class="fa fa-fire fa-fw"></i>freeCodeCamp</button>
</a>
</div>
</div>
</div>
<div class="footer">
<p>Copyright Reserved By Faraz Ahmed @ 2016</p>
</div