http://codepen.io/IrvingG/pen/adqaXg
上面的URL是我通过FreeCodeCamp工作的组合，你可以看到我的HTML和CSS代码。我对如何通过小型设备查看页面感到困难。页面变小但内容消失在下面。当我在桌面上查看页面时，它看起来我现在想要的，但不是在移动设备上。我不确定如何处理联系部分，但这不是我主要关注的问题。我想要一些关于如何修复我的页面的帮助或想法，或者我做错了它的行为方式。非常感谢你的进步。
<body>
<div class="navbar navbar-inverse navbar-fixed-top" 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">Irving Gonzalez</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#slide2">Home</a></li>
<li><a href="#slide2">About</a></li>
<li><a href="#slide3">Projects</a></li>
<li><a href="#slide4">Contact</a></li>
</ul>
</div>
</div>
</div>
<!----- SLIDES START --->
<div class="jumbotron" id="slide1">
<div class="container">
<h1>Portfolio</h1>
<p><a class="btn btn-primary btn-md" href="#slide3" role="button">Projects</a></p>
</div>
</div>
<div id="slide2">
<div class="container">
<div class="row">
<div class="col-xs-11 col-sm-6 col-md-offset-1 col-md-5 col-lg-offset-0 col-lg-6">
<h1 class="text-center" id="about">About</h1>
<p class="text-justify lead text-muted" id="aboutMe">
Hi there! My name is Irving Gonzalez and I am a <b>Computer Science</b> student at <b>John Jay College of Criminal Justice</b>. Currently, I am working towards becoming a Full Stack Web Developer with the help of the curriculum from <b>freeCodeCamp</b> as well as other self-taught web services. I have a passion for innovation, deviation, technology, and languages.
<br>
<br> Below are some of the projects I've completed.
<p>
</div>
<div class="col-xs-11 col-sm-6 col-md-5 col-lg-6">
<img src="http://i66.tinypic.com/rm7495.jpg" alt="design thing" class="img-rounded img-responsive" id="aboutimage">
</div>
</div>
</div>
</div>
<div id="slide3">
<div class="container">
<h1 class="text-center">Works</h1>
<div class="row">
<div class="col-xs-11 col-sm-offset-3 col-sm-2 col-offset-1 col-sm-3">
<a href="http://codepen.io/IrvingG/full/BjVvjb/" class="thumbnail" id="workThumbnails"><img src="http://i67.tinypic.com/9u8ytv.jpg" class="img-rounded" alt="Future Project">
<div class="caption text-center">
<h4>Random Quotes</h4></div>
</a>
</div>
<div class="col-xs-11 col-sm-2 col-sm-3">
<a class="thumbnail" id="workThumbnails"><img src="https://cdn4.iconfinder.com/data/icons/under-construction/512/coming_soon-256.png" alt="Future Project">
<div class="caption text-center">
<h4>Basic Calculator</h4></div>
</a>
</div>
<div class="col-xs-11 col-sm-2 col-sm-3">
<a class="thumbnail" id="workThumbnails"><img src="https://cdn4.iconfinder.com/data/icons/under-construction/512/coming_soon-256.png" alt="Future Project">
<div class="caption text-center">
<h4>Future Project</h4></div>
</a>
</div>
</div>
<div class="row">
<div class="col-xs-11 col-sm-offset-3 col-sm-2 col-offset-1 col-sm-3">
<a class="thumbnail" id="workThumbnails"><img src="https://cdn4.iconfinder.com/data/icons/under-construction/512/coming_soon-256.png" alt="Future Project">
<div class="caption text-center">
<h4>Future Project</h4></div>
</a>
</div>
<div class="col-xs-11 col-sm-2 col-sm-3">
<a class="thumbnail" id="workThumbnails"><img src="https://cdn4.iconfinder.com/data/icons/under-construction/512/coming_soon-256.png" alt="Future Project">
<div class="caption text-center">
<h4>Future Project</h4></div>
</a>
</div>
<div class="col-xs-11 col-sm-2 col-sm-3">
<a class="thumbnail" id="workThumbnails"><img src="https://cdn4.iconfinder.com/data/icons/under-construction/512/coming_soon-256.png" alt="Future Project">
<div class="caption text-center">
<h4>Future Project</h4></div>
</a>
</div>
</div>
</div>
</div>
<div id="slide4">
<div class="container text-center">
<div class="row">
<!-- ether move these to the bottom or delete them -->
<div class="col-xs-1 col-sm-offset-3">
<a href="mailto:irv.jgonz@gmail.com" alt="irv.jgonz@gmail.com"><i class="fa fa-envelope fa-2x"></i></a></div>
<div class="col-xs-1">
<a href="http://www.freecodecamp.com/irvgonz" alt="FreeCodeCamp" target="_blank">
<i class="fa fa-fire fa-2x"></i></a>
</div>
<div class="col-xs-1"><a href="http://github.com/irvgonz" target="_blank"><i class="fa fa-github-square fa-2x"></i></a></div>
<div class="col-xs-1"><a href="https://www.linkedin.com/in/irving" target="_blank"><i class="fa fa-linkedin-square fa-2x"></i></a></div>
<div class="col-xs-1"><a href="https://www.facebook.com/irving.gonzalez.1466" target="_blank"><i class="fa fa-facebook-official fa-2x"></i></a></div>
<div class="col-xs-1"><a href="https://twitter.com/g0_irving" target="_blank"><i class="fa fa-twitter-square fa-2x"></i></a></div>
</div>
<div class="row">
<div class "col-sm-offset-3 col-sm-6">
<h2>GET IN TOUCH</h2>
<p>Do you have any questions, comments, or simply want to say Hello?
<br>Send me a message through the social media above.
<br>I'll be more than happy to help you!
</p>
<address>
<strong>Irving Gonzalez</strong><br>
1234 MadeUp place<br>
New York, NY 10040<br>
<i class="fa fa-phone fa-1x"></i> (123) 456-7890<br>
<a href="mailto:irv.jgonz@gmail.com"><i class="fa fa-envelope fa-1x"> Irv.jgonz@gmail.com</i></a>
</address>
</div>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-static-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<p>@ 2016 Irving Gonzalez</p>
</div>
<!--
<div class="navbar-text pull-right">
<a href="mailto:irv.jgonz@gmail.com" alt="irv.jgonz@gmail.com"><i class="fa fa-envelope fa-2x"></i></a>
<a href="http://www.freecodecamp.com/irvgonz" alt="FreeCodeCamp" target="_blank"><i class="fa fa-fire fa-2x"></i></a>
<a href="http://github.com/irvgonz" target="_blank"><i class="fa fa-github-square fa-2x"></i></a>
<a href="https://www.linkedin.com/in/irving" target="_blank"><i class="fa fa-linkedin-square fa-2x"></i></a>
<a href="https://www.facebook.com/irving.gonzalez.1466" target="_blank"><i class="fa fa-facebook-official fa-2x"></i></a>
<a href="https://twitter.com/g0_irving" target="_blank"><i class="fa fa-twitter-square fa-2x"></i></a>
This will put the social media at the bottom-->
</div>
</div>
</div>
</body>
#about{
color: #404040;
}
#aboutimage{
box-shadow: 5px 5px 20px grey;
}
#aboutMe{
background-color: #f2f2f2;
padding:15px;
border:rounded;
}
#workThumbnails{
box-shadow: 5px 5px 20px grey;
}
#slide2 .container{
position: relative;
right: 50px;
font-weight:bold;
}
#slide4 .row a{
/*This changes the color of the links do not delete*/
color: inherit;
text-decoration: none;
}
/* this is for the navbar links on the bottom in case i want to switch it.
.navbar .container a{
color: inherit;
text-decoration: none;
padding-left: 20px;
}
*/
.jumbotron {
background: url("http://i64.tinypic.com/33nvoft.jpg") 50% 0 no-repeat fixed;
color: #fff;
height: 670px;
padding: 200px 0 260px 0;
background-size: cover;
}
#slide2 {
background-color: #fff;
color: #333333;
height: 600px;
margin: 20px;
overflow: hidden;
padding: 0px;
}
#slide3 {
background-color: #fff;
color: #333333;
height: 700px;
padding: 20px;
overflow: hidden;
}
#slide4 {
background: url("http://i66.tinypic.com/x6eyw.jpg") 50% 0 no-repeat fixed;
height: 550px;
margin: 0 auto;
padding-top:25px;
color: #fff;
background-size: cover;
}
答案 0 :(得分：1)
使用此CSS
{{1}}
这会将您的主要内容幻灯片扩展到可用窗口的高度。
答案 1 :(得分：1)
当你逐渐减小窗口的宽度时，我可以看到＆＃34;关于＆＃34;部分正在重叠。尝试将此添加到您的CSS。
#slide2 div.container div.row
{
margin-left:50px;
}
答案 2 :(得分：1)
您的内容消失了，因为您将幻灯片设置为具有高度，然后将溢出设置为隐藏。因此，在你设置幻灯片的高度，任何东西被切断的内容都不会消失。
答案 3 :(得分：0)
您使用了太多的列网格类，这些类在这里是不必要的。您只需在项目幻灯片下方的两个部分使用.col-md-6，即＃slide2。另外，从＃slide2中的.container类中删除padding-right和padding-left属性。对页面的其余部分使用类似的编辑。希望这会有所帮助。