文章/答案/技术大牛

发布

问网站响应式设计的问题
EN

Stack Overflow用户

提问于 2016-12-15 17:59:53

回答 1查看 48关注 0票数 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

谢谢!

responsive-design

html

css

twitter-bootstrap-3

回答 1

Stack Overflow用户

发布于 2016-12-15 18:09:53

你在这里弄错了

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

将其更改为

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41161280

复制

相似问题

问网站响应式设计的问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问网站响应式设计的问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问网站响应式设计的问题
EN