我创建了一个考虑到响应式设计的投资组合页面。在整页上，它看起来很棒，在Surface，iPad或手机等较小的屏幕上，质量很差。导航栏中的链接变得偏离中心以及其他一些问题。下面列出的代码笔链接。提前谢谢你。
代码笔： http://codepen.io/A-Jordan/pen/yOKNVe/
.HTML：
<html>
<head>
<title>Portfolio Page</title>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<div class="row">
<div class="about">
<div class="col-md-4">
<li><a href="#about">About</a>
</li>
</div>
</div>
<div class="portfolio">
<div class="col-md-4">
<li><a href="#portfolio">Portfolio</a>
</li>
</div>
</div>
<div class="contact">
<div class="col-md-4">
<li><a href="#contact">Contact</a>
</li>
</div>
</div>
</div>
</ul>
</div>
</nav>
<div class="div-1">
<div class="row">
<div class="col-md-6">
<img class="my-picture" src="http://s20.postimg.org/vo5nz85kt/my_face.jpg" alt="My face">
</div>
<div class="col-md-6">
<p> Hello! My name is Anthony Jordan, I am a Web Developer. I enjoy learnoing HTML, CSS, JavaScript & jQuery. I love bringing something to life. Please enjoy my portfolio; there is more to come. </p>
</div>
</div>
<div class="div-2">
<h2 id="portfolio">Portfolio</h2>
<div class="row">
<div class="col-md-4 ">
<img class="img-responsive" src="http://s20.postimg.org/wswgpg4zh/Tennis_Game_New.png" alt="Classic Tennis">
</div>
<div class="col-md-4 ">
<img class="img-responsive" src="http://s20.postimg.org/rv8sa3qd9/Break_Game_Clone_screenshot.png" alt="Brick Destoryer">
</div>
<div class="col-md-4 ">
<img class="img-responsive" src="http://s20.postimg.org/6627zhpod/Tribute_Page.jpg" alt="Tribute Page">
</div>
</div>
</div>
<div class="div-4">
<div class="row">
<div class="col-md-4 ">
<img class="img-responsive" src="https://placeimg.com/640/480/tech/grayscale" alt="Placeholder">
</div>
<div class="col-md-4 ">
<img class="img-responsive" src="https://placeimg.com/640/480/arch/grayscale" alt="Placeholder">
</div>
<div class="col-md-4 ">
<img class="img-responsive" src="https://placeimg.com/640/480/nature/grayscale" alt="Placeholder">
</div>
</div>
</div>
<hr>
<div class="div-3">
<div class="row">
<h2 id="contact">Contact Me</h2>
<div class="col-md-8">
<p class="p-2"> If you would like to get in touch with me, all I need is your name and email, and I will be more than happy to reach out to you. Thank you.</p>
</div>
<div class="col-md-4 ">
<img class=" ph-1 img-responsive" src="https://placeimg.com/320/240/people/grayscale" alt="Placeholder">
</div>
</div>
<div class="row">
<div class="col-md-4">
<form role="form">
<div class="form-group">
<label for="email">Email Address:</label>
<input type="email" class="form-control" id="email">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="name">Name:</label>
<input type="name" class="form-control" id="name">
</div>
</iv>
</form>
</div>
</div>
<nav class=" nav-2 navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<ul class="nav navbar-nav">
<div class="row">
<div class="button-1">
<div class="col-md-4">
<li><a target="_blank" href="https://github.com/A-Jordan">GitHub</a>
</li>
</div>
</div>
<div class="button-2">
<div class="col-md-4">
<li><a target="_blank" href="https://www.linkedin.com/in/akjordan">LinkedIn</a>
</li>
</div>
</div>
<div class="button-3">
<div class="col-md-4">
<li><a target="_blank" href="https://twitter.com/Brotesque">Twitter</a>
</li>
</div>
</div>
</div>
</ul>
</nav>
</body>
</html>
.CSS：
.about {
margin-left: 600px;
}
body {
background-color: #8c8c8c;
color: black;
margin-left: 220px;
margin-right: 220px;
}
.button-1 {
margin-left: 600px;
}
.button-2 {
margin-left: 700px;
}
.button-3 {
margin-left: 800px;
}
.contact {
margin-left: 800px;
}
.div-1 {
background-color: #b3b3b3;
}
.div-2 {
background-color: #d9d9d9;
}
.div-3 {
background-color: #d9d9d9;
margin-bottom: 100px;
}
.div-4 {
background-color: #d9d9d9;
margin-top: 50px;
}
.form-group {
color: black;
}
h1 {
margin-left: 1050px;
}
h2 {
text-align: center;
}
p {
color: black;
font-size: 20px;
margin-right: 220px;
margin-top: 65px;
float: justify;
}
.p-2 {
float: justify;
font-size: 20px;
margin-bottom: 50px;
margin-left: 40px;
}
.ph-1 {
margin-right: 50px;
}
.portfolio {
margin-left: 700px;
}
.my-picture {
max-width: 50%;
-webkit-border-radius: 10%;
-moz-border-radius: 45%;
border-radius: 45%;
margin-left: 145px;
}
.nav-2 {
margin-left: 220px;
margin-right: 220px;
}
看来您是引导程序的新手。我可以看到您已经为导航栏使用了左边距，并且您还使用了 col-md-4。在使用RWD（响应式网页设计）时，我建议您使用引导导航栏的教程。Bootstrap 框架提供了许多有用的类，您可以使用它们来设置标记样式。在这里，您可以使用导航栏右边距而不是左边距。请浏览引导导航栏的教程以获得响应式菜单。您还可以通过一次为不同的屏幕分辨率（如 Col-LG-3 Col-MD-4 Col-SM-6 Col-XS-12）应用多个网格类来使您的产品组合完全响应。您可以一起使用所有这些类来根据屏幕分辨率设置标记样式。访问下面给出的链接，该链接将进一步指导您。引导导航栏
祝你好运