Question

下面的代码段有6个form-group。所有东西都使用Bootstrap 4设计，垂直和水平居中。中心对齐实际上有效，但是当我垂直调整浏览器窗口的大小时，顶部的一些元素在浏览器的滚动条中隐藏了（请运行代码片段以查看）。

有谁能告诉我如何解决这个问题？

＆＃13;

<!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.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
        crossorigin="anonymous">
    <style>
        body,
        html {
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="container h-100">
        <div class="row h-100 justify-content-center align-items-center">
            <div class="col-lg-5 col-md-8 col-sm-11">
                <form class="form-control" method="post">
                    <div class="form-group mb-2">
                        <label class="col-form-label col-form-label-sm pt-0 pb-0">
                            Email 1
                        </label>
                        <input type="text" class="form-control form-control-sm" />
                    </div>
                    <div class="form-group mb-2">
                        <label class="col-form-label col-form-label-sm pt-0 pb-0">
                            Email 2
                        </label>
                        <input type="text" class="form-control form-control-sm" />
                    </div>
                    <div class="form-group mb-2">
                        <label class="col-form-label col-form-label-sm pt-0 pb-0">
                            Email 3
                        </label>
                        <input type="text" class="form-control form-control-sm" />
                    </div>
                    <div class="form-group mb-2">
                        <label class="col-form-label col-form-label-sm pt-0 pb-0">
                            Email 4
                        </label>
                        <input type="text" class="form-control form-control-sm" />
                    </div>
                    <div class="form-group mb-2">
                        <label class="col-form-label col-form-label-sm pt-0 pb-0">
                            Email 5
                        </label>
                        <input type="text" class="form-control form-control-sm" />
                    </div>
                    <div class="form-group mb-2">
                        <label class="col-form-label col-form-label-sm pt-0 pb-0">
                            Email 6
                        </label>
                        <input type="text" class="form-control form-control-sm" />
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>

</html>

＆＃13;

Answer 1

只需使用100vh在行上设置min-height。

＆＃13;

<!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.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
        crossorigin="anonymous">
    <style>
        .min-100 {
            min-height: 100vh;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row min-100 justify-content-center align-items-center">
            <div class="col-lg-5 col-md-8 col-sm-11">
                <form class="form-control" method="post">
                    <div class="form-group mb-2">
                        <label class="col-form-label col-form-label-sm pt-0 pb-0">
                            Email 1
                        </label>
                        <input type="text" class="form-control form-control-sm" />
                    </div>
                    <div class="form-group mb-2">
                        <label class="col-form-label col-form-label-sm pt-0 pb-0">
                            Email 2
                        </label>
                        <input type="text" class="form-control form-control-sm" />
                    </div>
                    <div class="form-group mb-2">
                        <label class="col-form-label col-form-label-sm pt-0 pb-0">
                            Email 3
                        </label>
                        <input type="text" class="form-control form-control-sm" />
                    </div>
                    <div class="form-group mb-2">
                        <label class="col-form-label col-form-label-sm pt-0 pb-0">
                            Email 4
                        </label>
                        <input type="text" class="form-control form-control-sm" />
                    </div>
                    <div class="form-group mb-2">
                        <label class="col-form-label col-form-label-sm pt-0 pb-0">
                            Email 5
                        </label>
                        <input type="text" class="form-control form-control-sm" />
                    </div>
                    <div class="form-group mb-2">
                        <label class="col-form-label col-form-label-sm pt-0 pb-0">
                            Email 6
                        </label>
                        <input type="text" class="form-control form-control-sm" />
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>

</html>

＆＃13;

Answer 2

您需要将min-height设置为.h-100才能实现

.h-100 {
    height: 100%!important;
    min-height: 393px; // Added
}

如果您无法将{css}添加到h-100，则可以在HTML中添加自己的h-100课程，并为该课程提供min-height。例如

<div class="h-100 myForm">

</div>

你的css就像这样

.myForm {
  min-height: 393px;
}

工作小提琴here

垂直和水平居中导致隐藏元素

2 个答案: