Question

我正在尝试使用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

谢谢！

Answer 1

你这里有错误

<div class="col-xs-12 col-md-8">

将其更改为

<div class="col-xs-6 col-md-8">

网站响应式设计问题

1 个答案: