1
我想创建一个使用bootstrap的响应式网站，并有麻烦使我的部分不会超过给定的区域（深灰色），这里是一个when browser is downsized的例子，也是英雄的字体缩小或在移动设备上查看重叠的图片的脸，但我不知道如何做这件事。问题与网站响应式设计
body,
html {
height: 100%;
font-size: 100%;
}
.cd-fixed-bg {
font-family: 'Open Sans', sans-serif;
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
}
.cd-scrolling-bg {
min-height: 60%;
}
.cd-fixed-bg.cd-bg-1 {
background-image: url("http://images.boomsbeat.com/data/images/full/209/jobs-jpg.jpg");
}
.cd-scrolling-bg.cd-color-1 {
height: 60%;
background-color: #212121;
color: #fff;
}
.cd-intro {
color: #212121;
position: absolute;
top: 40%;
bottom: auto;
right: auto;
padding-left: 15%;
text-align: left;
max-height: 70%;
}
.cd-intro-dec-1 {
font-weight: 300;
font-size: 48px;
}
.cd-intro-dec-2 {
font-weight: 400;
font-size: 72px;
}
.cd-content-format {
font-family: 'Open Sans', sans-serif;
}
.header-about {
font-weight: 300;
font-size: 60px;
}
.about-sub {
font-weight: 700;
font-size: 18px;
}
.about-content {
font-weight: 400;
}
.about-img-adjust {
padding-top: 20px;
padding-bottom: 10px;
}
.about-quote {
font-weight: 300;
font-style: italic;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tribute Page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<div class="cd-fixed-bg cd-bg-1">
<div class="cd-intro">
<h1 class="cd-intro-dec-1">a tribute to</h1>
<h2 class="cd-intro-dec-2">Steve Jobs</h2>
</div>
</div>
<div class="cd-scrolling-bg cd-color-1">
<div class="container cd-content-format">
<div class="row">
<div class="col-xs-6 col-md-4">
<img src="http://i.imgur.com/w39VG2S.jpg" class="about-img-adjust img-responsive" alt="Steve Jobs">
<blockquote class="blockquote about-quote">"Being the richest man in the cemetery doesn't matter to me. Going to bed at night saying we've done something wonderful, that's what matters to me."</blockquote>
</div>
<div class="col-xs-12 col-md-8">
<h1 class="header-about">about</h1>
<p class="about-sub">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, saepe voluptate sit. Quasi rem minima veritatis beatae voluptate, temporibus modi quisquam adipisci repellendus nostrum, culpa sapiente fugiat aliquid, sunt deleniti.</p>
<p class="about-content">Architecto repudiandae eaque voluptatibus rem voluptatum veritatis debitis cumque repellat doloribus molestias, officiis soluta quo vitae esse minus quisquam est deleniti porro quia consequatur. Ad libero voluptatibus provident maiores quaerat?</p>
<p class="about-content">Enim eaque mollitia perferendis nesciunt voluptates, aut voluptatum illo ad, accusantium officia iusto ipsam natus totam deleniti cupiditate nihil culpa quibusdam laudantium soluta molestias! Facilis doloremque odio iste dolores provident!</p>
<p class="about-content">Eum a rerum hic, sequi assumenda nostrum facere sit atque, delectus porro quibusdam doloribus dolore? Excepturi alias consequatur minus ipsam, natus voluptatem sunt temporibus eligendi eos expedita. Mollitia magni, ex?</p>
<p class="about-content">Reiciendis, incidunt exercitationem, voluptatum quasi atque, aspernatur beatae, sed a voluptatem praesentium amet quisquam itaque nemo impedit accusamus minus ducimus laboriosam omnis saepe? Libero repellat quam nobis, aperiam at saepe.</p>
<p class="about-content">Minus facere optio veritatis aliquid temporibus quidem voluptatem asperiores rerum? Alias earum dignissimos, tenetur, aspernatur saepe ullam sapiente sint cupiditate cum voluptates vitae natus magnam, repudiandae perspiciatis ea! Et, molestias.</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>我不知道我在做什么错了，任何人可以帮我找到一个解决方案？我在这里设置了我的演示：http://codepen.io/kazera/pen/KNrXxB
谢谢！