У меня есть следующий код, который использует Bootstrap 4. Мой CSS в основном является копией Пример формы входа Bootstrap .
Основное отличие состоит в том, что у меня есть элемент видео в div, который обеспечивает границу и соотношение 1: 1.
Проблема в том, что на маленьких дисплеях (например, на мобильных устройствах) первый 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>