Bootstrap 4 不遵守高度指令

Question

使用 Bootstrap 4 的 row 指令，我的 Web 布局中有 2 个元素应该分别占据可见屏幕高度的 25% 和 75%，但它似乎对元素的高度没有任何影响。

看起来电子邮件表单和图像视图只是包装元素内容所需的最小高度。我做错了什么？

<template>
  <div class="container h-100" id="app">
    <div class="row h-25">
      <div class="image-container row justify-content-center align-items-center">
        <img src="../assets/images/snaprefund_thin_stroke_cropped_opaque.png" alt="SnapRefund">
      </div>
    </div>
    <div class="row h-75">
      <EmailForm/>
    </div>
  </div>
</template>


<style>
.container {
  margin: 0;
  background: url(~@/assets/images/pic.jpg) repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.image-container {
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
}

img {
  padding: 0;
  display: block;
  margin: 0 auto;
  max-height: 40%;
  max-width: 40%;
}
</style>

Answer 1

尝试在您的.container 中使用vh-100 而不是h-100，如果这不起作用，可以尝试添加：

  width: 100vw;
  height: 100vh;

到你的.image-container 看看它是否修复它。