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クエリで自分の提案をラップしてください。

もう1つ注意すべき点は、ブートストラップには存在しないcol-xl-*のクラスを使用しているようですが、col-xs-*のものを見逃しているようです。これは意図的ですか？そうでない場合は、交換してください。

ここには投稿したコードから何ができるのかを示すfiddleがあります。

autoprefixを忘れないでください。