网站自适应设计问题

Question

I am trying to create a responsive website using bootstrap and am having trouble with making my about section does not go past the given area (the dark gray), here is an example of when browser is downsized and also the hero's font when downsized or viewed on a mobile overlaps the face of the picture, however I am not sure on how about doing it. 我正在尝试使用引导程序创建一个响应式网站，并且使我的“关于”部分不超过给定区域（深灰色）时遇到麻烦，这是一个示例，其中说明了当浏览器缩小时的大小，以及缩小或查看时英雄的字体的大小手机上的图片与图片的表面重叠，但是我不确定该怎么做。

 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>

I'm not sure what I'm doing wrong, can anybody please help me find a solution? 我不确定自己在做什么错，有人可以帮我找到解决方案吗？ I have set up my demo here: http://codepen.io/kazera/pen/KNrXxB 我在这里设置了演示： http : //codepen.io/kazera/pen/KNrXxB

Thanks! 谢谢！

Answer 1

You have mistake here 你这里有错

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

Change it to to 更改为

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

网站自适应设计问题

问题描述

1 个解决方案

解决方案1
2 2016-12-15 10:09:53

网站自适应设计问题

问题描述

1 个解决方案

解决方案1 2 2016-12-15 10:09:53

解决方案1
2 2016-12-15 10:09:53