1. 首页
  2. 问答
  3. 将响应图像附加到底部

将响应图像附加到底部

2016-09-12 70 views
0

我使用引导程序使我的设计响应。所以，我遇到了一个问题。我有一个部分。在这一部分我有一张照片。我需要这张图片才能在本节的底部。总是。即使我的屏幕会超宽。将响应图像附加到底部

FULL HTML - >

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <title>Postanite finančni svetovalec</title> 
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet"> 
    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="vendor/simple-line-icons/css/simple-line-icons.css"> 
    <link rel="stylesheet" href="vendor/device-mockups/device-mockups.min.css"> 
</head> 

<body id="page-top"> 

    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only">Navigation</span> Menu <i class="fa fa-bars"></i> 
       </button> 
       <a class="navbar-brand page-scroll" href="#page-top">Postanite finančni svetovalec</a> 
      </div> 

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li> 
         <a class="page-scroll" href="#download">Poklic</a> 
        </li> 
        <li> 
         <a class="page-scroll" href="#features">Prednosti</a> 
        </li> 
        <li> 
         <a class="page-scroll" href="#contact">Priložnost</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </nav> 

    <header> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-sm-7"> 
        <div class="header-content"> 
         <div class="header-content-inner"> 
          <h1>Izberite poklic s perspektivo in postanite finančni svetovalec</h1> 
          <a href="#download" class="btn btn-outline btn-xl page-scroll">Začnite danes!</a> 
         </div> 
        </div> 
       </div> 
       <div class="col-sm-5"> 
        <div class="device-container"> 

        <!--<div style="height: auto; width: auto;">--> 
        <div class="container-fluid"> 
        <div class="businessman"> 
        <img src="img/businessman.png" class="img-responsive"> 
        </div> 
        </div> 
       </div> 
       <div class="button"> 
      </div> 
     </div> 
    </header> 

    <section id="download" class="download bg-primary text-center"> 
    <div class="blockToCenter"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-8 col-md-offset-2"> 
        <h2 class="section-heading">Zakaj postati finančni svetovalec?</h2> 
        <p>Finančni svetovalci imajo veliko več zaposlitvenih priložnosti, kot ostali poklici. Pridobite praktično in uporabno znanje in se jim pridružite!</p> 
        </div> 
       </div> 
      </div> 

     <script type="text/javascript" src="generate.js"></script> 
     </div> 
    </section> 

    <section id="Prednosti" class="features"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-12 text-center"> 
        <div class="section-heading"> 
         <h2>Prednosti poklica</h2> 
         <p class="text-muted">Koristi, ki jih boste imeli kot finančni svetovalec so:</p> 
         <hr> 
        </div> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-6"> 
       <div class="device-container"> 

         <img src="img/benef.png" class="img-responsive" alt=""> 

         </div> 
       </div> 
       <div class="col-md-6"> 
        <div class="container-fluid"> 
         <div class="row"> 
          <div class="col-md-6"> 
           <div class="feature-item"> 
            <!--<i class="icon-screen-smartphone text-primary"></i>--> 
            <h3>Nadpovprečen zaslužek</h3> 
            <p class="text-muted">Uspešni finančni svetovalci uživajo nadpovprečen zaslužek</p> 
           </div> 
          </div> 
          <div class="col-md-6"> 
           <div class="feature-item"> 
            <h3>Sodobno okolje</h3> 
            <p class="text-muted">Delo poteka v sodobnih pisarniških prostorih z odličnimi pogoji za delo</p> 
           </div> 
          </div> 
         </div> 
         <div class="row"> 
          <div class="col-md-6"> 
           <div class="feature-item"> 
            <h3>Ugled</h3> 
            <p class="text-muted">Imejte ugled v lokalnem okolju in širše</p> 
           </div> 
          </div> 
          <div class="col-md-6"> 
           <div class="feature-item"> 
            <h3>Vrhunski partnerji</h3> 
            <p class="text-muted">Delo z najuglednejšimi poslovnimi partnerji v Evropi in svetu.</p> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
    </section> 
    <section id="contact" class="contact bg-primary"> 
     <div class="container"> 
      <h2>Pridružite se timu uspešnih finančnih svetovalcev!</h2> 

     </div> 
    </section> 
    <section id="features" class="features"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-12 text-center"> 
        <div class="section-heading"> 
         <h2>Postanite sam svoj šef</h2> 
         <p class="text-muted">Prav vi ste primerni za finančnega svetovalca, saj:</p> 
         <hr> 
        </div> 
       </div> 
      </div> 
      <div class="row"> 
      <div class="col-md-6"> 
        <div class="device-container"> 

         <img src="img/benef.png" class="img-responsive" alt=""> 
         </div> 
       </div> 
       <div class="col-md-6"> 
        <div class="container-fluid"> 
         <div class="row"> 
          <div class="col-md-6"> 
           <div class="feature-item"> 
            <h3>Prevzemate odgovornost</h3> 
            <p class="text-muted">Prevzeli ste odgovornost za svojo prihodnost in za prihodnost vaše družine</p> 
           </div> 
          </div> 
          <div class="col-md-6"> 
           <div class="feature-item"> 
            <h3>Razvijate svoj potencial</h3> 
            <p class="text-muted">Imate potencial in vam je mar za vaš osebni in strokovni razvoj</p> 
           </div> 
          </div> 
         </div> 
         <div class="row"> 
          <div class="col-md-6"> 
           <div class="feature-item"> 
            <!--<i class="icon-present text-primary"></i>--> 
            <h3>Želite postati uspešni</h3> 
            <p class="text-muted">Želite si uspeha, svobode in uresničitve življenjskih ciljev</p> 
           </div> 
          </div> 
          <div class="col-md-6"> 
           <div class="feature-item"> 
            <!--<i class="icon-lock-open text-primary"></i>--> 
            <h3>Ste drzni</h3> 
            <p class="text-muted">Drznete si spoznati nove svetove in področja</p> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
    </section> 

    <section class="cta"> 
     <div class="cta-content"> 
      <div class="container"> 
       <h2>Ne oklevajte.<br>Udeležite se usposabljanja!</h2> 
       <a href="#contact" class="btn btn-outline btn-xl page-scroll">Ugotovite kaj obsega program!</a> 
      </div> 
     </div> 
     <div class="overlay"></div> 
    </section> 
    <section id="Specializacija" class="contact bg-primary"> 
     <div class="container"> 
     <div class="row"> 
     <div class="col-md-4"> 
     <img src="img/first.png"> 
     <p class="review">Very good company. I am just trying to leave there some kind words.</p> 
     </div> 
     <div class="col-md-4"> 
     <img src="img/second.png"> 
     <p class="review">We are looking forward to cooperate with you again.</p> 
     </div> 
     <div class="col-md-4"> 
     <img src="img/third.png"> 
     <p class="review">Cooperation with you was really nice! Can't wait to work with you again.</p> 
     </div> 
     </div> 
     <!-- 
      <h2>Specializacija</h2> 
      <p>Na finančnem parketu se lahko osredotočate v eno ali več specialnih področjih in se izmojstrite v naložbenega, borznega, zavarovalniškega eksperta ali pa na primer postanete 
najboljši poznavalec trga plemenitih kovin.</p> 
      <p>Samo od vas je odvisno, v kateri smeri boste poglabljali svoje znanje. Vam v prid govori dejstvo, da število investitorjev, ki iščejo nasvet strokovnjaka tudi v Sloveniji neprestano in 
skokovito narašča.</p> 
     </div>--> 
    </section> 
<section id="Priložnost" class="features"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-12 text-center"> 
        <div class="section-heading"> 
         <h2>Izkoristite odlično priložnost</h2> 
         <p class="text-muted">Ravno zdaj je pravi čas za finančno svetovanje, ker je:</p> 
         <hr> 
        </div> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-6"> 
        <div class="device-container"> 

         <img src="img/benef.png" class="img-responsive" alt=""> 

         <!-- <div class="device-mockup iphone6_plus portrait white"> 
          <div class="device"> 
           <div class="screen"> 

            <img src="img/demo-screen-1.jpg" class="img-responsive" alt=""> </div> 
           <div class="button"> 

           </div> 
          </div> 
         </div>--> 
        </div> 
       </div> 
       <div class="col-md-6"> 
        <div class="container-fluid"> 
         <div class="row"> 
          <div class="col-md-6"> 
           <div class="feature-item"> 
            <!--<i class="icon-screen-smartphone text-primary"></i>--> 
            <h3>Perspektiven poklic</h3> 
            <p class="text-muted">Finančni svetovalec poklic z največjo perspektivo</p> 
           </div> 
          </div> 
          <div class="col-md-6"> 
           <div class="feature-item"> 
            <!--<i class="icon-camera text-primary"></i>--> 
            <h3>Malo konkurence</h3> 
            <p class="text-muted">Osebnih svetovalcev v Sloveniji premalo in konkurence praktično ni,</p> 
           </div> 
          </div> 
         </div> 
         <div class="row"> 
          <div class="col-md-6"> 
           <div class="feature-item"> 
            <!--<i class="icon-present text-primary"></i>--> 
            <h3>Hitra rast</h3> 
            <p class="text-muted">finančna industrija ena najhitreje rastočih panog v svetu sploh</p> 
           </div> 
          </div> 
          <div class="col-md-6"> 
           <div class="feature-item"> 
            <!--<i class="icon-lock-open text-primary"></i>--> 
            <h3>Velike potrebe</h3> 
            <p class="text-muted">Večina prebivalstva finančno nepismena in potrebuje pomoč strokovnjaka</p> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
    </section> 

    <footer> 
     <div class="container"> 
      <p>&copy; 2016 Start Bootstrap. All Rights Reserved.</p> 
      <ul class="list-inline"> 
       <li> 
        <a href="#">Privacy</a> 
       </li> 
       <li> 
        <a href="#">Terms</a> 
       </li> 
       <li> 
        <a href="#">FAQ</a> 
       </li> 
      </ul> 
     </div> 
    </footer> 

    <!-- jQuery --> 
    <script src="vendor/jquery/jquery.min.js"></script> 

    <!-- Bootstrap Core JavaScript --> 
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script> 

    <!-- Plugin JavaScript --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> 

    <!-- Theme JavaScript --> 
    <script src="js/new-age.min.js"></script> 

</body> 

</html>

FULL CSS - >

.heading-font { 
    font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif'; 
    font-weight: 200; 
    letter-spacing: 1px; 
} 
.body-font { 
    font-family: 'Muli', 'Helvetica', 'Arial', 'sans-serif'; 
} 
.alt-font { 
    font-family: 'Lato', 'Helvetica', 'Arial', 'sans-serif'; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
} 
html, 
body { 
    height: 75%; 
    width: 100%; 
} 
body { 
    font-family: 'Muli', 'Helvetica', 'Arial', 'sans-serif'; 
} 
a { 
    -webkit-transition: all 0.35s; 
    -moz-transition: all 0.35s; 
    transition: all 0.35s; 
    color: #fdcc52; 
} 
a:hover, 
a:focus { 
    color: #fcbd20; 
} 
hr { 
    max-width: 100px; 
    margin: 25px auto 0; 
    border-width: 1px; 
    border-color: rgba(34, 34, 34, 0.1); 
} 
hr.light { 
    border-color: white; 
} 
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
    font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif'; 
    font-weight: 200; 
    letter-spacing: 1px; 
} 
p { 
    font-size: 18px; 
    line-height: 1.5; 
    margin-bottom: 20px; 
} 
.navbar-default { 
    background-color: white; 
    border-color: rgba(34, 34, 34, 0.05); 
    -webkit-transition: all 0.35s; 
    -moz-transition: all 0.35s; 
    transition: all 0.35s; 
    font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif'; 
    font-weight: 200; 
    letter-spacing: 1px; 
} 
.navbar-default .navbar-header .navbar-brand { 
    font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif'; 
    font-weight: 200; 
    letter-spacing: 1px; 
    color: #fdcc52; 
} 
.navbar-default .navbar-header .navbar-brand:hover, 
.navbar-default .navbar-header .navbar-brand:focus { 
    color: #fcbd20; 
} 
.navbar-default .navbar-header .navbar-toggle { 
    font-size: 12px; 
    color: #222222; 
    padding: 8px 10px; 
} 
.navbar-default .nav > li > a { 
    font-family: 'Lato', 'Helvetica', 'Arial', 'sans-serif'; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-size: 11px; 
} 
.navbar-default .nav > li > a, 
.navbar-default .nav > li > a:focus { 
    color: #222222; 
} 
.navbar-default .nav > li > a:hover, 
.navbar-default .nav > li > a:focus:hover { 
    color: #fdcc52; 
} 
.navbar-default .nav > li.active > a, 
.navbar-default .nav > li.active > a:focus { 
    color: #fdcc52 !important; 
    background-color: transparent; 
} 
.navbar-default .nav > li.active > a:hover, 
.navbar-default .nav > li.active > a:focus:hover { 
    background-color: transparent; 
} 
@media (min-width: 768px) { 
    .navbar-default { 
    background-color: transparent; 
    border-color: transparent; 
    } 
    .navbar-default .navbar-header .navbar-brand { 
    color: rgba(255, 255, 255, 0.7); 
    } 
    .navbar-default .navbar-header .navbar-brand:hover, 
    .navbar-default .navbar-header .navbar-brand:focus { 
    color: white; 
    } 
    .navbar-default .nav > li > a, 
    .navbar-default .nav > li > a:focus { 
    color: rgba(255, 255, 255, 0.7); 
    } 
    .navbar-default .nav > li > a:hover, 
    .navbar-default .nav > li > a:focus:hover { 
    color: white; 
    } 
    .navbar-default.affix { 
    background-color: white; 
    border-color: rgba(34, 34, 34, 0.1); 
    } 
    .navbar-default.affix .navbar-header .navbar-brand { 
    color: #222222; 
    } 
    .navbar-default.affix .navbar-header .navbar-brand:hover, 
    .navbar-default.affix .navbar-header .navbar-brand:focus { 
    color: #fdcc52; 
    } 
    .navbar-default.affix .nav > li > a, 
    .navbar-default.affix .nav > li > a:focus { 
    color: #222222; 
    } 
    .navbar-default.affix .nav > li > a:hover, 
    .navbar-default.affix .nav > li > a:focus:hover { 
    color: #fdcc52; 
    } 
} 


header { 
    height: 100%; 
    width: 100%; 
    overflow-y: hidden; 
    overflow-x: hidden; 
    background: url("../img/bg-pattern.png"), #7b4397; 
    /* fallback for old browsers */ 
    background: url("../img/bg-pattern.png"), -webkit-linear-gradient(to left, #7b4397, #dc2430); 
    /* Chrome 10-25, Safari 5.1-6 */ 
    background: url("../img/bg-pattern.png"), linear-gradient(to left, #7b4397, #dc2430); 
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
    color: white; 
} 
header .header-content { 
    text-align: center; 
    padding: 150px auto; 

} 
header .header-content .header-content-inner { 
    position: relative; 
    max-width: 500px; 
    margin: 0 auto; 
} 
header .header-content .header-content-inner h1 { 
    margin-top: 0; 
    margin-bottom: 30px; 
    font-size: 30px; 
} 
header .header-content .header-content-inner .list-badges { 
    margin-bottom: 25px; 
} 
header .header-content .header-content-inner .list-badges img { 
    height: 50px; 
    margin-bottom: 25px; 
} 

header .device-container { 

} 

@media (min-width: 320px) { 
    header .header-content .header-content-inner { 
    margin-top: 60%; 
    } 

    body { 
    height: 100%; 
    } 
} 

@media (min-width: 360px) { 
    header .header-content .header-content-inner { 
    margin-top: 40%; 

    } 
    body { 
    height: 100%; 
    } 
} 

@media (min-width: 640px) { 
    header .header-content .header-content-inner { 
    margin-top: 40%; 

    } 
    body { 
    height: 100%; 
    } 
} 

@media (min-width: 768px) { 
    header { 
    min-height: 100%; 
    } 
    header .header-content { 
    text-align: left; 
    padding: 0; 
    height: 100vh; 
    } 
    header .header-content .header-content-inner { 
    max-width: none; 
    margin: 0; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    } 
    header .header-content .header-content-inner h1 { 
    font-size: 35px; 
    } 

    header .device-container { 
    max-width: none; 
    max-height: calc(0vh); 
    margin-top: 30%; 

    } 
} 

@media (min-width: 992px) { 
    header .header-content .header-content-inner h1 { 
    font-size: 50px; 
    } 
} 

section { 
    padding: 80px 0; 
} 
section h2 { 
    font-size: 50px; 
} 
section.download { 
    padding: 150px 0; 
    position: relative; 
} 
section.download h2 { 
    margin-top: 0; 
    font-size: 50px; 
} 
section.download .badges .badge-link { 
    display: block; 
    margin-bottom: 25px; 
} 
section.download .badges .badge-link:last-child { 
    margin-bottom: 0; 
} 
section.download .badges .badge-link img { 
    height: 60px; 
} 

section.download .forma { 
    margin-top:6%; 
} 
@media (min-width: 768px) { 
    section.download .badges .badge-link { 
    display: inline-block; 
    margin-bottom: 0; 
    } 
} 
@media (min-width: 768px) { 
    section.download h2 { 
    font-size: 70px; 
    } 
} 
section.features .section-heading { 
    margin-bottom: 100px; 
} 
section.features .section-heading h2 { 
    margin-top: 0; 
} 
section.features .section-heading p { 
    margin-bottom: 0; 
} 
section.features .device-container, 
section.features .feature-item { 
    max-width: 300px; 
    margin: 0 auto; 
} 

section.features .feature-item i { 
    font-size: 80px; 
    background: -webkit-linear-gradient(to left, #7b4397, #dc2430); 
    background: linear-gradient(to left, #7b4397, #dc2430); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
} 

@media (max-width: 992px) { 
    header .device-container img { 
    display: none; 
    } 
} 

@media (min-width: 992px) { 
    section.features .device-container, 
    section.features .feature-item { 
    max-width: none; 
    } 
} 
section.cta { 
    position: relative; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
    background-position: center; 
    background-image: url('../img/bg-cta.jpg'); 
    padding: 250px 0; 
} 
section.cta .cta-content { 
    position: relative; 
    z-index: 1; 
} 
section.cta .cta-content h2 { 
    margin-top: 0; 
    margin-bottom: 25px; 
    color: white; 
    max-width: 450px; 
    font-size: 50px; 
} 

@media (min-width: 768px) { 
    section.cta .cta-content h2 { 
    font-size: 80px; 
    } 
} 

section.cta .overlay { 
    height: 100%; 
    width: 100%; 
    background-color: rgba(0, 0, 0, 0.5); 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
section.contact { 
    text-align: center; 
} 
section.contact h2 { 
    margin-top: 0; 
    margin-bottom: 25px; 
} 
section.contact h2 i { 
    color: #dd4b39; 
} 
section.contact ul.list-social { 
    margin-bottom: 0; 
} 
section.contact ul.list-social li a { 
    display: block; 
    height: 80px; 
    width: 80px; 
    line-height: 80px; 
    font-size: 40px; 
    border-radius: 100%; 
    color: white; 
} 

section.contact ul.list-social li.social-twitter a { 
    background-color: #1da1f2; 
} 
section.contact ul.list-social li.social-twitter a:hover { 
    background-color: #0d95e8; 
} 
section.contact ul.list-social li.social-facebook a { 
    background-color: #3b5998; 
} 
section.contact ul.list-social li.social-facebook a:hover { 
    background-color: #344e86; 
} 
section.contact ul.list-social li.social-google-plus a { 
    background-color: #dd4b39; 
} 
section.contact ul.list-social li.social-google-plus a:hover { 
    background-color: #d73925; 
} 

footer { 
    background-color: #222222; 
    padding: 25px 0; 
    color: rgba(255, 255, 255, 0.3); 
    text-align: center; 
} 
footer p { 
    font-size: 12px; 
    margin: 0; 
} 
footer ul { 
    margin-bottom: 0; 
} 
footer ul li a { 
    font-size: 12px; 
    color: rgba(255, 255, 255, 0.3); 
} 
footer ul li a:hover, 
footer ul li a:focus, 
footer ul li a:active, 
footer ul li a.active { 
    text-decoration: none; 
} 
.bg-primary { 
    background: #fdcc52; 
    background: -webkit-linear-gradient(#FF936F, #FFA07D); 
    background: linear-gradient(#FF936F, #FFA07D); 
} 
.text-primary { 
    color: #fdcc52; 
    font-size: 14px; 
} 
.no-gutter > [class*='col-'] { 
    padding-right: 0; 
    padding-left: 0; 
} 
.btn-outline { 
    color: white; 
    border-color: white; 
    border: 1px solid; 
} 
.btn-outline:hover, 
.btn-outline:focus, 
.btn-outline:active, 
.btn-outline.active { 
    color: white; 
    background-color: #fdcc52; 
    border-color: #fdcc52; 
} 
.btn { 
    font-family: 'Lato', 'Helvetica', 'Arial', 'sans-serif'; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    border-radius: 300px; 
} 
.btn-xl { 
    padding: 15px 45px; 
    font-size: 11px; 
} 
::-moz-selection { 
    color: white; 
    text-shadow: none; 
    background: #222222; 
} 
::selection { 
    color: white; 
    text-shadow: none; 
    background: #222222; 
} 
img::selection { 
    color: white; 
    background: transparent; 
} 
img::-moz-selection { 
    color: white; 
    background: transparent; 
} 
body { 
    webkit-tap-highlight-color: #222222; 
}

I need this guy to be on the bottom!!!

来源

2016-09-12 Egor Kuznetsov

+3

你需要提供更多的代码。足以让我们重现您的问题。 –

回答

0

试试这个：

添加以下CSS到您现有的CSS。

在CODEPEN

检查演示中，我希望它的工作

CSS：

.device-container { 
    display:flex; 
    align-items:flex-end; 
    height:100%; 
} 
.businessman img { 
    max-width: 200px; 

} 

.row { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    flex-wrap: wrap; 
} 

.row > [class*='col-'] { 
    display: flex; 
    flex-direction: column; 
}

修改CSS

演示在CODEPEN

CSS：

.heading-font { 
    font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif'; 
    font-weight: 200; 
    letter-spacing: 1px; 
} 

.body-font { 
    font-family: 'Muli', 'Helvetica', 'Arial', 'sans-serif'; 
} 

.alt-font { 
    font-family: 'Lato', 'Helvetica', 'Arial', 'sans-serif'; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
} 

html, 
body { 
    height: 75%; 
    width: 100%; 
} 

body { 
    font-family: 'Muli', 'Helvetica', 'Arial', 'sans-serif'; 
} 

a { 
    -webkit-transition: all 0.35s; 
    -moz-transition: all 0.35s; 
    transition: all 0.35s; 
    color: #fdcc52; 
} 

a:hover, 
a:focus { 
    color: #fcbd20; 
} 

hr { 
    max-width: 100px; 
    margin: 25px auto 0; 
    border-width: 1px; 
    border-color: rgba(34, 34, 34, 0.1); 
} 

hr.light { 
    border-color: white; 
} 

h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
    font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif'; 
    font-weight: 200; 
    letter-spacing: 1px; 
} 

p { 
    font-size: 18px; 
    line-height: 1.5; 
    margin-bottom: 20px; 
} 

.navbar-default { 
    background-color: white; 
    border-color: rgba(34, 34, 34, 0.05); 
    -webkit-transition: all 0.35s; 
    -moz-transition: all 0.35s; 
    transition: all 0.35s; 
    font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif'; 
    font-weight: 200; 
    letter-spacing: 1px; 
} 

.navbar-default .navbar-header .navbar-brand { 
    font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif'; 
    font-weight: 200; 
    letter-spacing: 1px; 
    color: #fdcc52; 
} 

.navbar-default .navbar-header .navbar-brand:hover, 
.navbar-default .navbar-header .navbar-brand:focus { 
    color: #fcbd20; 
} 

.navbar-default .navbar-header .navbar-toggle { 
    font-size: 12px; 
    color: #222222; 
    padding: 8px 10px; 
} 

.navbar-default .nav > li > a { 
    font-family: 'Lato', 'Helvetica', 'Arial', 'sans-serif'; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-size: 11px; 
} 

.navbar-default .nav > li > a, 
.navbar-default .nav > li > a:focus { 
    color: #222222; 
} 

.navbar-default .nav > li > a:hover, 
.navbar-default .nav > li > a:focus:hover { 
    color: #fdcc52; 
} 

.navbar-default .nav > li.active > a, 
.navbar-default .nav > li.active > a:focus { 
    color: #fdcc52 !important; 
    background-color: transparent; 
} 

.navbar-default .nav > li.active > a:hover, 
.navbar-default .nav > li.active > a:focus:hover { 
    background-color: transparent; 
} 

@media (min-width: 768px) { 
    .navbar-default { 
    background-color: transparent; 
    border-color: transparent; 
    } 
    .navbar-default .navbar-header .navbar-brand { 
    color: rgba(255, 255, 255, 0.7); 
    } 
    .navbar-default .navbar-header .navbar-brand:hover, 
    .navbar-default .navbar-header .navbar-brand:focus { 
    color: white; 
    } 
    .navbar-default .nav > li > a, 
    .navbar-default .nav > li > a:focus { 
    color: rgba(255, 255, 255, 0.7); 
    } 
    .navbar-default .nav > li > a:hover, 
    .navbar-default .nav > li > a:focus:hover { 
    color: white; 
    } 
    .navbar-default.affix { 
    background-color: white; 
    border-color: rgba(34, 34, 34, 0.1); 
    } 
    .navbar-default.affix .navbar-header .navbar-brand { 
    color: #222222; 
    } 
    .navbar-default.affix .navbar-header .navbar-brand:hover, 
    .navbar-default.affix .navbar-header .navbar-brand:focus { 
    color: #fdcc52; 
    } 
    .navbar-default.affix .nav > li > a, 
    .navbar-default.affix .nav > li > a:focus { 
    color: #222222; 
    } 
    .navbar-default.affix .nav > li > a:hover, 
    .navbar-default.affix .nav > li > a:focus:hover { 
    color: #fdcc52; 
    } 
} 

header { 
    /* height: 100%; */ 
    height: 400px; 
    width: 100%; 
    overflow-y: hidden; 
    overflow-x: hidden; 
    background: url("../img/bg-pattern.png"), #7b4397; 
    /* fallback for old browsers */ 
    background: url("../img/bg-pattern.png"), -webkit-linear-gradient(to left, #7b4397, #dc2430); 
    /* Chrome 10-25, Safari 5.1-6 */ 
    background: url("../img/bg-pattern.png"), linear-gradient(to left, #7b4397, #dc2430); 
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
    color: white; 
} 

header .header-content { 
    text-align: center; 
    /* padding: 150px auto; */ 
} 

header .header-content .header-content-inner { 
    position: relative; 
    max-width: 500px; 
    margin: 0 auto; 
} 

header .header-content .header-content-inner h1 { 
    margin-top: 0; 
    margin-bottom: 30px; 
    font-size: 30px; 
} 

header .header-content .header-content-inner .list-badges { 
    margin-bottom: 25px; 
} 

header .header-content .header-content-inner .list-badges img { 
    height: 50px; 
    margin-bottom: 25px; 
} 

header .device-container {} 

@media (min-width: 320px) { 
    header .header-content .header-content-inner { 
    /*margin-top: 60%; 
    display:flex; 
    align-items: center;*/ 
    } 
    body { 
    height: 100%; 
    } 
} 

@media (min-width: 360px) { 
    header .header-content .header-content-inner { 
    /* margin-top: 40%; */ 
    } 
    body { 
    height: 100%; 
    } 
} 

@media (min-width: 640px) { 
    header .header-content .header-content-inner { 
    /* margin-top: 40%; */ 
    } 
    body { 
    height: 100%; 
    } 
} 

@media (min-width: 768px) { 
    header { 
    /*min-height: 100%;*/ 
    } 
    header .header-content { 
    text-align: left; 
    padding: 0; 
    /* height: 100vh; */ 
    align-items: center; 
    display: flex; 
    height: 100%; 
    } 
    header .header-content .header-content-inner { 
    /* max-width: none; 
    margin: 0; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); */ 
    } 
    header .header-content .header-content-inner h1 { 
    font-size: 35px; 
    } 
    header .device-container { 
    /* max-width: none; 
    max-height: calc(0vh); 
    margin-top: 30%; */ 
    } 
} 

@media (min-width: 992px) { 
    header .header-content .header-content-inner h1 { 
    font-size: 50px; 
    } 
} 

section { 
    padding: 80px 0; 
} 

section h2 { 
    font-size: 50px; 
} 

section.download { 
    padding: 150px 0; 
    position: relative; 
} 

section.download h2 { 
    margin-top: 0; 
    font-size: 50px; 
} 

section.download .badges .badge-link { 
    display: block; 
    margin-bottom: 25px; 
} 

section.download .badges .badge-link:last-child { 
    margin-bottom: 0; 
} 

section.download .badges .badge-link img { 
    height: 60px; 
} 

section.download .forma { 
    margin-top: 6%; 
} 

@media (min-width: 768px) { 
    section.download .badges .badge-link { 
    display: inline-block; 
    margin-bottom: 0; 
    } 
} 

@media (min-width: 768px) { 
    section.download h2 { 
    font-size: 70px; 
    } 
} 

section.features .section-heading { 
    margin-bottom: 100px; 
} 

section.features .section-heading h2 { 
    margin-top: 0; 
} 

section.features .section-heading p { 
    margin-bottom: 0; 
} 

section.features .device-container, 
section.features .feature-item { 
    max-width: 300px; 
    margin: 0 auto; 
} 

section.features .feature-item i { 
    font-size: 80px; 
    background: -webkit-linear-gradient(to left, #7b4397, #dc2430); 
    background: linear-gradient(to left, #7b4397, #dc2430); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
} 

@media (max-width: 992px) { 
    /*header .device-container img { 
    display: none; 
    }*/ 
} 

@media (min-width: 992px) { 
    section.features .device-container, 
    section.features .feature-item { 
    max-width: none; 
    } 
} 

section.cta { 
    position: relative; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
    background-position: center; 
    background-image: url('../img/bg-cta.jpg'); 
    padding: 250px 0; 
} 

section.cta .cta-content { 
    position: relative; 
    z-index: 1; 
} 

section.cta .cta-content h2 { 
    margin-top: 0; 
    margin-bottom: 25px; 
    color: white; 
    max-width: 450px; 
    font-size: 50px; 
} 

@media (min-width: 768px) { 
    section.cta .cta-content h2 { 
    font-size: 80px; 
    } 
} 

section.cta .overlay { 
    height: 100%; 
    width: 100%; 
    background-color: rgba(0, 0, 0, 0.5); 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

section.contact { 
    text-align: center; 
} 

section.contact h2 { 
    margin-top: 0; 
    margin-bottom: 25px; 
} 

section.contact h2 i { 
    color: #dd4b39; 
} 

section.contact ul.list-social { 
    margin-bottom: 0; 
} 

section.contact ul.list-social li a { 
    display: block; 
    height: 80px; 
    width: 80px; 
    line-height: 80px; 
    font-size: 40px; 
    border-radius: 100%; 
    color: white; 
} 

section.contact ul.list-social li.social-twitter a { 
    background-color: #1da1f2; 
} 

section.contact ul.list-social li.social-twitter a:hover { 
    background-color: #0d95e8; 
} 

section.contact ul.list-social li.social-facebook a { 
    background-color: #3b5998; 
} 

section.contact ul.list-social li.social-facebook a:hover { 
    background-color: #344e86; 
} 

section.contact ul.list-social li.social-google-plus a { 
    background-color: #dd4b39; 
} 

section.contact ul.list-social li.social-google-plus a:hover { 
    background-color: #d73925; 
} 

footer { 
    background-color: #222222; 
    padding: 25px 0; 
    color: rgba(255, 255, 255, 0.3); 
    text-align: center; 
} 

footer p { 
    font-size: 12px; 
    margin: 0; 
} 

footer ul { 
    margin-bottom: 0; 
} 

footer ul li a { 
    font-size: 12px; 
    color: rgba(255, 255, 255, 0.3); 
} 

footer ul li a:hover, 
footer ul li a:focus, 
footer ul li a:active, 
footer ul li a.active { 
    text-decoration: none; 
} 

.bg-primary { 
    background: #fdcc52; 
    background: -webkit-linear-gradient(#FF936F, #FFA07D); 
    background: linear-gradient(#FF936F, #FFA07D); 
} 

.text-primary { 
    color: #fdcc52; 
    font-size: 14px; 
} 

.no-gutter > [class*='col-'] { 
    padding-right: 0; 
    padding-left: 0; 
} 

.btn-outline { 
    color: white; 
    border-color: white; 
    border: 1px solid; 
} 

.btn-outline:hover, 
.btn-outline:focus, 
.btn-outline:active, 
.btn-outline.active { 
    color: white; 
    background-color: #fdcc52; 
    border-color: #fdcc52; 
} 

.btn { 
    font-family: 'Lato', 'Helvetica', 'Arial', 'sans-serif'; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    border-radius: 300px; 
} 

.btn-xl { 
    padding: 15px 45px; 
    font-size: 11px; 
} 

::-moz-selection { 
    color: white; 
    text-shadow: none; 
    background: #222222; 
} 

::selection { 
    color: white; 
    text-shadow: none; 
    background: #222222; 
} 

img::selection { 
    color: white; 
    background: transparent; 
} 

img::-moz-selection { 
    color: white; 
    background: transparent; 
} 

body { 
    webkit-tap-highlight-color: #222222; 
} 

header { 
    background: wheat; 
} 

.device-container { 
    display: flex; 
    align-items: flex-end; 
    height: 100%; 
} 

.businessman img { 
    max-width: 200px; 
} 

.row { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    flex-wrap: wrap; 
    height: 100%; 
} 

.row > [class*='col-'] { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
} 
.container { 
    height: 100%; 
}

来源

2016-09-12 20:38:31

+0

我添加了这段代码和“标题中的人”决定去屏幕的顶部... –

+0

在演示其工作正常.. –

+0

你可以自己检查它（https://www.dropbox.com/ s/gmn16tpoy8torcz/design％202.zip？dl = 0）（这个版本没有你的代码） –

相关问题

 相关问题