在 twitter bootstrap 的帮助下玩 html 和 css，但是 1）我似乎无法修复右侧的额外空间和 2）我无法在网页底部添加更多内容。
您可以在此处查看实时站点：practicerenz.kissr.com
这是我的 HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Practice Renz</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div class="header">
<div class="row">
<div class="col-xs-8">
<h1 class="title">Renz Site</h1>
</div>
<div class="col-xs-4">
<ul>
<li><a href="#work">WORK</a></li>
<li><a href="#blog">BLOG</a></li>
<li><a href="#contact">CONTACT</a></li>
<li><img class="social1" src="img/facebook.png" /></li>
<li><img class="social2" src="img/twitter_light.png" /></li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="maintitle">
<img src="img/user.png" />
<h1 class="name">I am Renzze Mistal.</h1>
<p class="occupation">Digital Marketer | Rookie Developer</p> <br />
<p class="info">I like to create and design things. I like to create and design things. I like to create and design things.</p>
</div>
<div class="work">
<img class="workimg" src="img/Dashboard.png" />
<h1 class="info2"><a name="work">My Work</a></h1>
<p class="info2">Here are some of the things that I've done.</p>
<ul class="thumbnails">
<li class="col-xs-4">
<div class="thumbnail">
<img src="img/work.png">
<p class="info3">Brand 1</p>
<p class="info3">Info info info info info</p>
</div>
</li>
<li class="col-xs-4">
<div class="thumbnail">
<img src="img/work.png">
<p class="info3">Brand 2</p>
<p class="info3">Info info info info info</p>
</div>
</li>
<li class="col-xs-4">
<div class="thumbnail">
<img src="img/work.png">
<p class="info3">Brand 3</p>
<p class="info3">Info info info info info</p>
</div>
</li>
</ul>
<div class="col-xs-12">
<div class="button">
<a href="http://www.google.com">
<button class="btn btn-primary" type="button">Learn more</button>
</a>
</div>
</div>
<div class="blog">
<img src="img/Comment.png">
<h1 class="blogname"><a class="blogtitle" name="blog">Blog</a></h1>
<p class="bloginfo">Read some of the stuff I've written.</p>
<img src="img/blog.png">
</div>
<div class="contact">
<h1>Contact</h1>
<p>Leave me a message below</p>
</div>
</div>
</div>
</div>
</body>
</html>
这是我的 CSS：
.col-xs-8 {
text-align: center;
color: #ecf0f1;
}
.col-xs-4 {
text-align: center;
color: #ecf0f1;
}
body {
background-color: #2980b9;
height: 100%;
}
.header {
background-color: #ecf0f1;
margin: 0 auto
}
ul li {
display: inline;
padding: 0 5px 0 5px;
font-family: 'Lato', sans-serif;
}
ul {
padding-top: 30px;
}
.title {
text-align: left;
padding-left: 20px;
}
.container {
width: 1024px;
height: auto;
margin: 0 auto;
padding: 0;
}
p {
font-family: 'Lato', sans-serif;
color: #ecf0f1;
}
h1 {
font-family: 'Roboto Condensed', sans-serif;
color: #2c3e50;
}
.maintitle {
text-align: center;
margin-top: 20px;
height: 300px;
}
.info {
margin-top: -20px;
}
.occupation {
font-size: 15px;
}
.work {
background-color: #ecf0f1;
height: 800px;
text-align: center;
}
.info2 {
color: #2c3e50;
text-align: center;
padding-top: 10px;
}
.name {
color: #ecf0f1;
}
.social1 {
width: 25px;
height: 25px;
display: inline;
margin-right: -15px;
}
.social2 {
width: 25px;
height: 25px;
display: inline;
}
.mywork {
display: inline;
}
.info3 {
color: #2c3e50;
text-align: center;
margin: 10px 0 10px 0;
}
.col-xs-12 {
text-align: center;
padding-bottom: 20px;
}
.blog {
background-color: #2980b9;
text-align: center;
height: 600px;
padding-top: 20px;
}
.blogname {
color: #ecf0f1;
}
.bloginfo {
color: #ecf0f1;
margin-bottom: 20px;
}
.blogtitle {
color: #ecf0f1;
}
.workimg {
padding-top: 20px;
}
感谢任何帮助！:)
PS 对不起，如果我的 HTML 和 CSS 看起来很乱。