html - Bootstrap 4 不遵守高度指令
问题描述
我的 web 布局中有 2 个元素应该分别使用 Bootstrap 4 的row
指令占据可见屏幕高度的 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>
解决方案
尝试在你的中使用vh-100
而不是,如果这不起作用,可能尝试添加:h-100
.container
width: 100vw;
height: 100vh;
给你.image-container
,看看它是否修复它。
推荐阅读
- sql - 根据行序列更新值 - Oracle SQL
- macos - Kubernetes - nfs:安装时服务器拒绝访问 - MacOS
- python - 印刷颜色给出“[31m”前缀
- python - 我在选择框中遇到问题,它可以选择多个选项,所选选项在子选择框中有几个对象
- sql - SSIS - 将日语双字节数据从 DB2 加载到 SQL Server 2017 时出现转换错误
- html - max-height 不适用于从底部滑入的 div
- sql - Oracle 12C:插入脚本在截断后花费了太多时间
- php - 如何在 API 平台上保存与实体的嵌套关系
- python - Pandas & Python:有没有办法导入excel文件的内容,在文件末尾添加文本内容,然后保存下来?
- python-3.x - 在 pytest 测试会话开始之前以编程方式查找 pytest 的根目录