Bootstrap 列在 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%，它所在的容器 (device-container) 似乎也没有容纳它的内容。

非常感谢您的帮助。抱歉，评论太多了。另外，如果有人知道为什么导航栏会超出页面，使右侧的浅蓝色列出现，请也告诉我。

Answer 1

在浮动框上设置 100% 不会像您期望的那样使其达到父级高度的 100%。从我的角度来看，您最好的解决方案是使用

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

当然，这意味着您需要去掉 <h1> 上巨大的顶部填充，因此它实际上居中。如果您对它在桌面上的外观感到满意，只需将我的建议包含在 @media 查询中即可。

我还要注意一件事：您似乎使用 col-xl-* 类，Bootstrap 中不存在，但您似乎错过了 [=16] =] 一个。这是故意的吗？如果没有，请更换它们。

这是 fiddle 我可以从您发布的代码中得到的东西。

别忘了autoprefix。

Bootstrap 列在 iPad 纵向模式下高度不同

Bootstrap columns not same height in iPad portrait mode

html

css

ipad

ios

twitter-bootstrap