我有以下使用 Bootstrap 4 的代码。我的 CSS 基本上是 Bootstrap Sign In Form Example 的副本.
主要区别在于我在提供边框和 1:1 比例的 div 中有一个视频元素。
问题是在小型显示器上(例如在移动设备上)第一个 div 根本不显示，第二个带有视频的 div 至少有一半也被隐藏了。 您可以调整浏览器窗口的大小以查看它。
我该如何解决？我有 margin: auto 但似乎根本没有帮助。
:root {
--input-padding-x: .75rem;
--input-padding-y: .75rem;
}
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-ordercode {
width: 100%;
max-width: 420px;
padding: 15px;
margin: auto;
}
.form-ordercode .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
margin-bottom: 10px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div class="container">
<form action="/" class="form-ordercode" method="post">
<div class="text-center mb-4">
<img class="mb-4" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">First line</h1>
</div>
<div class="form-control embed-responsive embed-responsive-1by1">
<video id="preview" class="embed-responsive-item"></video>
</div>
<div class="text-center mb-4">
<h1 class="h4 mb-3 font-weight-normal">Second line</h1>
</div>
<div>
<input class="form-control" placeholder="Order Nbr" type="text" value="" />
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">
Submit
</button>
</form>
</div>
</body>
</html>最佳答案
发生这种情况是因为主体是 display:flex 以允许表单居中。只需更改 CSS 即可使正文 min-height: 100%; ...
html {
height: 100%;
}
body {
min-height: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
关于html - Flexbox div 隐藏在小屏幕上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51117499/