有一个引导行填充屏幕高度，但在调整窗口大小时动态调整答案

【问题标题】：Have a bootstrap row fill the screen height, but adjust dynamicly on resizing the window有一个引导行填充屏幕高度，但在调整窗口大小时动态调整
【发布时间】：2015-10-01 11:02:34
【问题描述】：

更新：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 时，内容会从行中转义并到处乱七八糟。我正在尝试利用引导网格系统，以便在移动设备和笔记本电脑上看起来很好，所以这是一个问题。我做错了什么？

【问题讨论】：

代码格式出了点问题。我会尽快编辑。
display: flexbox 是旧语法。你能创建一个你面临的问题的演示吗？
我相信这会解决问题jsfiddle.net/4fgkxmg1/1
我确实将其更改为 flex 而不是 flexbox，其布局类似于您的小提琴。但是，问题仍然存在。我将高度设置为 100vh，以便该行填满整个屏幕，因为我在 jQuery 中使用页面跳转，并且我希望它填满整个屏幕。这可能是问题（高度样式）吗？
这是解决问题的小提琴link@ManojKumar

标签： css html twitter-bootstrap flexbox

【解决方案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");
}
});

一切正常，谢谢！

【讨论】：