Question

我有以下使用Bootstrap 4的代码。我的CSS基本上是Bootstrap Sign In Form Example的副本。

主要区别在于，我在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>

Answer 1

之所以发生这种情况，是因为body为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;
}

https://www.codeply.com/go/wPQufVxhe8

Flexbox div隐藏在小屏幕上

1 个答案: