iPad 세로 모드에서 부트 스트랩 열이 같지 않음

Question

내가 만들고있는이 사이트의 세로 모드가 엉망입니다. 현재 다음과 같습니다

시계가 수직으로 정상 바탕 화면보기 인을 중심으로 할 수 있도록 내가 원하는 건입니다.

HTML :

가

<header> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-7 col-md-7 col-xl-7 col-lg-7"> 
       <div class="header-content"> 
        <div class="header-content-inner"> 
         <h1>One for all. All for you.</h1> 
         <!-- <a href="#download" class="btn btn-outline btn-xl page-scroll">Start Now for Free!</a> --> 
        </div> 
       </div> 
      </div> 
      <div class="col-sm-5 col-md-5 col-xl-5 col-lg-5" style="height: 100%"> 
      <div class="device-container vertical-align"> 
       <div class="cycle-slideshow" data-cycle-timeout="1500" data-cycle-transition="1500" data-cycle-fx="fadeout" data-cycle-pause-on-hover="#er-pauser"> 
       <img class="img-responsive device-img center-block" src="img/landing2.png" alt=""> 
       <img class="img-responsive device-img center-block" src="img/landing1.png" alt=""> 
       <img class="img-responsive device-img center-block" src="img/landing3.png" alt=""> 
       <img class="img-responsive device-img center-block" src="img/landing5.png" alt=""> 
       <img class="img-responsive device-img center-block" src="img/landing4.png" alt=""> 
       <img class="img-responsive device-img center-block" src="img/landing6.png" alt=""> 
       </div> 
      </div> 
      </div> 
     </div> 
    </div> 
    </header> 

CSS :

header { 
     position: relative; 
     width: 100%; 
     min-height: auto; 
     overflow-y: hidden; 
     background: #47c0d7; /* Old browsers */ 
     background: -moz-linear-gradient(top, #47c0d7 0%, #e6f9ff 55%, #e6f9ff 100%); /* FF3.6-15 */ 
     background: -webkit-linear-gradient(top, #47c0d7 0%,#e6f9ff 55%,#e6f9ff 100%); /* Chrome10-25,Safari5.1-6 */ 
     background: linear-gradient(to bottom, #47c0d7 0%,#e6f9ff 55%,#e6f9ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#47c0d7', endColorstr='#e6f9ff',GradientType=0); /* IE6-9 */ 

    } 
    header .header-content { 
     text-align: center; 
     padding: 100px 0px 0px; 
     position: relative; 

    } 
    header .header-content .header-content-inner { 
     width:100%; 
     text-align: center; 
     position: relative; 
    /* max-width: 500px; 
    */ margin: 0 auto; 
    } 

    header .device-container { 
    /* max-width: 400px;*/ 
     height: 100%; 
    /* margin: 100px auto; 
    */} 

    header .device-img { 
     left: 0; 
     right: 0; 
     width: 100%; 
     margin: 0 auto; 
     width: 300px; 
    } 

    @media (min-width: 768px) { 
     header { 
     min-height: 100%; 
     } 

     header .header-content { 
     text-align: center; 
     padding: 0; 
     height: 100vh; 
     } 
     header .header-content .header-content-inner { 
     text-align: center; 
     max-width: none; 
     margin: 0 auto; 
     position: absolute; 
     top: 50%; 
     transform: translateY(-50%); 
     width: 100%; 
     } 

    .about-content .about-content-inner { 
     text-align: justify; 
     max-width: none; 
     position: relative; 
     top: 50%; 
     transform: translateY(-50%); 
     } 
     header .header-content .header-content-inner h1 { 
     margin-top: 0; 
     margin-bottom: 30px; 
     font-size: 55px; 
     color: #363939; 
     text-align: center; 
     } 
    .about-content .about-content-inner h3 { 
     font-size: 20px; 
     font-weight: 400; 
     } 
     header .device-container { 
    /* max-width: none; 
     max-height: calc(0vh); 
     margin: 100px auto 0;*/ 
     padding: 0; 
     height: 100vh; 
     } 

그것에서의 컬럼의 높이를 100 %로하고 (장치 용기)에서의 용기없는도 나타나지 않는 그 내용을 잡아라.

이 도와 주셔서 너무 감사드립니다. 미안합니다. 많은 사람들이 그것을 주석 처리했습니다. 또한 누군가가 왜 navbar가 페이지를 통과하여 오른쪽으로 밝은 파란색 기둥을 만들었는지 알고 있다면 나에게도 알려주십시오.

Answer 1

플로팅 상자에 100%을 설정한다고해서 부모 높이가 100%이되지 않습니다. 가장 좋은 해결책은, 내가보기 곳에서, 물론

header .row { 
    display: flex; 
    align-items: center; 
    min-height: 100vh; 
} 

사용하는 것, 이것은 당신이 <h1>에 거대한 위에 패딩을 잃게해야합니다 의미, 그래서 실제로 센터. 바탕 화면의 모양이 마음에 들면 @media 쿼리에서 내 제안을 마무리하십시오.

또 하나주의해야 할 점은 부트 스트랩에는 존재하지 않는 col-xl-* 클래스를 사용하는 것 같지만, col-xs-*은 놓친 것 같습니다. 이것은 의도적입니까? 그렇지 않은 경우 교체하십시오.

내가 게시 한 코드로 만들 수있는 코드는 fiddle입니다.

autoprefix을 잊지 마세요.