Question

更新：css风格：

height: 100vh;

导致了下面的初始问题。我正在使用这个，以便当页面跳转时网页的特定部分填满了屏幕。单击按钮。是否有另一种方法让部分（div class="row"）填满屏幕，但是当窗口调整大小时，它被调整为包含所有内容？使用上述样式时，它完全适合屏幕，但在窗口调整大小时，高度保持在100vh，但行内的内容被调整为垂直堆叠，因此它超出了行高。

初步问题：

我正在尝试在CSS / Bootstrap中使用flexbox样式来垂直对齐3列中的内容，这些内容在一行内。

这是一个问题小提琴：http://jsfiddle.net/coopwatts/fnh4exxs/

HTML是这样的：

<div class="row">
  <div class="col-sm-4 col-md-4">
    <img></img>
    <h2></h2>
    <p></p>
  </div>
  <div class="col-sm-4 col-md-4">
    <img></img>
    <h2></h2>
    <p></p>
  </div>
  <div class="col-sm-4 col-md-4">
    <img></img>
    <h2></h2>
    <p></p>
  </div>
</div>

Flexbox的CSS类似于：

.row {
  display: flex;
  align-items: center;
  justify-content: center;
}

Flexbox可以很好地对齐内容，但是当窗口最小化到xs时，内容会逃离该行并在整个地方混乱。我试图利用bootstraps网格系统，所以在移动设备和笔记本电脑上看起来很漂亮，所以这是一个问题。我做错了什么？

Answer 1

我能够通过添加以下jQuery来解决我的问题：

$(window).resize(function() {
if($(window).width() <= 768) {
    $(".customer-options").css("height", "auto");
}
else if ($(window).width() > 768) {
    $(".customer-options").css("height", "");
    $(".customer-options").css("height", "100hv");
}
});

一切都很好，谢谢！

让引导行填满屏幕高度，但在调整窗口大小时动态调整

1 个答案: