css - 让 Bootstrap 行填充屏幕高度，但在调整窗口大小时动态调整

Question

更新:CSS 样式:

height: 100vh;

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

初始问题:

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

这是一个解决问题的 js: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 时，内容会脱离行并杂乱无章。我正在尝试利用 Bootstrap 网格系统，以便在移动设备和笔记本电脑上看起来很好，所以这是一个问题。我做错了什么？

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");
}
});

一切正常，谢谢!